你應該知道的30個css選擇器

2024-07-11 08:31:22

字體：大中小

來源：轉載

供稿：網友

1.*

復制代碼

代碼如下:
* {
margin: 0;
padding: 0;
}

對于初學者，在學習更多高級選擇器之前，最先了解的選擇器。

星號選擇器將匹配頁面里的每一個元素。很多開發者使用這個技巧將外邊距和內邊距重置為零。雖然在快速測試時這確實很好用，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。

* 也能作為子選擇符使用。

復制代碼

代碼如下:
#container * {
border: 1px solid black;
}

這將匹配#container div的每一個后代元素。再次強調，盡量不要使用這種技術。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

2.#X

復制代碼

代碼如下:
#container {
width: 960px;
margin: auto;
}

井號前綴允許我們選擇id。這是最常見的用法，不過應該慎重使用ID選擇器。

反復問自己：我一定需要id來匹配要選擇的元素嗎？

id選擇符是唯一的，不允許重復使用。如果可能的話，先嘗試使用一個標簽名稱，一個新的HTML5元素，甚至是一個偽類。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

3. .X

復制代碼

代碼如下:
.error {
color: red;
}

現在介紹的是類選擇符。id和類的不同之處在于后者可以多次使用。當你想給一組元素應用樣式的時候可以使用類選擇符。另外，當你緊想給特殊元素應用樣式的時候才使用id。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

4. X Y

復制代碼

代碼如下:
li a {
text-decoration: none;
}

下一個最常用的選擇符是后代選擇符。當你需要給你的選擇符增加特殊性的時候你可以使用。例如，如果你只想匹配無序列表下的錨元素？此時后代選擇符派上用場。

小貼士——如果你的選擇符看起來像這樣 X Y Z A B.error，那你就錯了。時刻問自己使用這高的權重是否有必要。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

5. X

復制代碼

代碼如下:
a { color: red; }
ul { margin-left: 0; }

如果你想匹配頁面上的所有的元素，根據他們的類型，而不是id或類名？顯而易見，使用類型選擇符。如果你需要選擇所有的無序列表，請使用ul {}。

上一篇：你對CSS布局中的Position了解程度有多少

下一篇：DIV+CSS通過border樣式制作帶箭頭提示框效果