CSS選擇器是前端開發中的重要概念,選擇器的不同類型能夠對不同的HTML元素進行選中并應用CSS樣式。下面簡單介紹幾種常見的CSS選擇器。
/* 通用選擇器 */
* {
margin: 0;
padding: 0;
}
/* 元素選擇器 */
p {
color: red;
}
/* 類選擇器 */
.class1 {
font-size: 18px;
}
/* ID選擇器 */
#id1 {
background-color: yellow;
}
/* 屬性選擇器 */
input[type="text"] {
border: 1px solid black;
}
/* 偽類選擇器 */
a:hover {
text-decoration: underline;
}
/* 后代選擇器 */
div p {
text-align: center;
}
/* 相鄰兄弟選擇器 */
h1 + p {
margin-top: 20px;
}
/* 子選擇器 */
ul >li {
list-style: none;
}
/* 通用兄弟選擇器 */
h2 ~ p {
font-style: italic;
}
通用選擇器<*>可以匹配HTML頁面中的任何元素,常用于reset.css中用來去除默認的margin和padding樣式,確保不同瀏覽器顯示的頁面效果一致。
元素選擇器就像是一個CSS樣式的“預設”,如果想將一個頁面中的所有段落元素p設置為紅色,就可以使用p選擇器。
類選擇器通過給相關的HTML元素添加class屬性,以便將同樣class屬性的元素選中并應用統一的樣式。
ID選擇器通過給相關的HTML元素添加id屬性,以便將id屬性匹配的元素選中并應用統一的樣式。一個HTML頁面中只能有一個相同id的元素,如果id選擇器選出多個元素,則會應用于第一個匹配到的元素。
屬性選擇器通過匹配HTML元素的某個屬性值,以便將相匹配的元素選中并應用樣式。
偽類選擇器用于選中元素的特定狀態,比如:hover表示鼠標懸停在元素上時的狀態。
后代選擇器選擇位于另一個元素內部的元素。
相鄰兄弟選擇器用于選擇指定元素后面的第一個兄弟元素。
子選擇器選擇某個元素的子元素,有助于精準地設置某個元素內部特定子元素的樣式。
通用兄弟選擇器用于選擇某個元素后面的所有兄弟元素。
以上是幾種最常見的CSS選擇器類型,準確掌握這些選擇器類型能夠使你更加高效地進行頁面設計與開發。