使用 CSS 是開發者設計網站頁面的必備技能。然而在使用 CSS 的時候，有時候我們會發現斷點老是走到 CSS 文件里，這是一個非常讓人頭疼的問題。
這種問題通常出現在調試網頁時，在瀏覽器中單擊F12鍵打開開發者工具，選擇“調試”選項卡，然后嘗試查看頁面的元素時。
<div class="container">
<h1>Hello World</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.text {
font-size: 18px;
margin-bottom: 20px;
}我們可以看到上面的例子，其中包含一個類名為“container”的 `
` 元素和一個類名為“text”的 `
` 元素。這個頁面的樣式由兩個 CSS 規則控制。問題就在于，當我們在開發者工具中選擇“調試”選項卡時，如果在斷點命中之前鼠標懸停在“text”類名后面的冒號上，那么瀏覽器會把我們帶到“text”類定義的 CSS 規則上而不是 HTML 元素上。
解決這個問題的方法是，當你在選擇一個 HTML 元素進行調試時，不要把鼠標懸停在元素屬性的冒號后面。而是要像直接單擊元素一樣，單擊該屬性值的任何地方，例如單擊“text”類名這個詞的后面的空格。
總之，斷點老是走到 CSS 文件里這個問題是由于開發者工具的行為造成的。現在我們知道如何避免這個問題，以便可以更快地調試問題并提高我們的工作效率。
上一篇html5代碼清除格式
下一篇mysql中怎么設置小寫