今天將在這裏介紹幾種選擇器,其中有標籤選擇器、類選擇器、id選擇器、並集選擇器、通配符選擇器。
選擇器:一般都會去使用id選擇器。
1.選擇器的基本書寫格式
選擇器的一般格式:
Element(元素/標籤)選擇器
標籤名稱{
css屬性:css屬性值;
}
2.部分代碼
1)標籤選擇器
div{
font-size:20px;
color:#00F;
}
2)class類選擇器
- 在html標籤中給定class屬性
- 特點:在同一個html頁面中,對個標籤可以指定同名的class屬性值
- 格式:
.class屬性值{
css屬性:css屬性值;
}
.c_d1{
font-size:30px;
color:#0F0;
}
3)Id選擇器
其中值得注意的是瀏覽器存在兼容問題:
前端:在標籤中大部分能指定id屬性值 唯一的
後端:http協議
request header:(請求頭)
content-type:text/aplain
- 在標籤中給定一個id屬性值
- 特點:在同一個html頁面中,標籤的id屬性值必須唯一,不能重複
後面javascript:通過id屬性值獲取標籤對象,如果同名,document.getElementByld(“id屬性值”)可能獲取不到標籤對象 - 格式:
#id屬性值{
css樣式屬性:css屬性值;
}
#dl2{
font-size:36px;
color:#F00;
}
4)並集選擇器
格式:
selector1,selector2,…,selectorn{
css樣式屬性:css樣式屬性值;
}
_d1,#dl2{
font-size:30px;
background-color:greenyellow;
}
5)交集選擇器(子元素選擇器)
selector1 selector2…
div span{
font-size:26px;
color:grey;
}
6)通配符選擇器:*
.*{
font-size:20px;
color:#CCC;
}
3.注意事項
- 類選擇器的優先級大於標籤選擇器
- id選擇器的優先級>class選擇器>標籤選擇器