選擇器決定了樣式規則適用於哪些元素。
html5有以下常見的選擇器：
基本選擇器：
- 元素選擇器
* 格式：標記名{/* 聲明塊* /}
* 所有與該標記名匹配的元素，都將應用聲明塊中的規則
2. 類選擇器
* 格式：**.**類名{/* 聲明塊 */}
* 所有class屬性為指定類名的元素，都將應用聲明塊中的規則，其中類型名可以寫多個，方便代碼復用
* 所有標簽都可有class屬性
3. id選擇器
* 格式：#id值{/* 聲明塊 */}
* < h1 id="屬性值">
* 屬性id為指定值的元素，都將應用聲明塊中的規則
* 在同一個HTML文檔中，元素的id值必須唯一
* 現階段不寫id選擇器，JS使用
4.通配符選擇器
格式: *+{聲明塊}
例子: *{ color:red;}
5.並集選擇器/組合選擇器 格式: 元素或類或id+","+元素或類或id+","+元素或類或id","+{聲明塊}
例子: h1,.cc,h3{ color:red;}層次選擇器:
-
子集選擇器
格式:父級元素名稱+">"+子級元素名稱+{聲明塊} 例子: div>p{color:red;} -
后代選擇器
格式:祖先元素名稱+空格+后代元素名稱+{聲明塊} 例子: div p{color:red;} -
兄弟選擇器
格式: A元素名稱+"+"+B元素名稱+{聲明塊} 例子: div+P{color:red;} 注:選擇A元素后緊鄰的B元素,AB之間不許有其他元素. -
通用選擇器
格式:同級元素A+"~"+同級元素B+{聲明塊} 例子: div~p{color:red; 注:表示選擇與A元素同級別的所有B元素(B的位置是在A后面)
偽類選擇器
動態偽類選擇器
1.未訪問
a:link{color:black;}
2.鼠標懸停
a:hover{color:pink;}
3.鼠標點擊時
a:active{color:green;}
4.點擊后
a:visited{color:五顏六色;}
注:hover是可以用於多個元素身上的,但其他三個只能用於具有點擊功能的元素上
- a:focus{color:五光十色;} 多用於輸入框或鏈接
注:IE7以前不支持:focus，IE6以前不支持:hover :active
-
上5個偽類選擇器的順序要求:（love hate）
A: link,visited,focus,hover,active
B: visited,link,focus,hover,active
結構偽類選擇器
格式:元素名稱+":nth-child(n)"+{聲明塊}
-
例子: section:nth-child(2){color:deeppink;}
表示選中html里的第二個section元素,文字設置為deeppink -
選中第一個
格式:元素名稱+":first-child"+{聲明塊} 例子: p:first-child{color:red;} -
選中最后一個
格式:元素名稱+":last-child"+{聲明塊} 例子: p:last-child{color:red;} -
選中奇數項
格式:元素名稱+":nth-child(odd)"+{聲明塊} 例子:section:nth-child(odd){color:deeppink;} -
選中偶數項
格式:元素名稱+":nth-child(even)"+{聲明塊} 例子:section:nth-child(even){color:deeppink;}注意：n從0開始取整數，直到最大值。例選中前3個：-n+3
偽元素選擇器
-
元素后面加內容
格式:元素名稱+":after"+{content:"要添加的內容";} 例子: i:after {content:"姓名";}
*元素前面加內容
格式:元素名稱+":before"+{content:"要添加的內容";}
例子: i:before
{content:"姓名";}
-
元素第一行添加樣式
格式:元素名稱+":first-line"+{聲明塊} 例子: p:first-line{color:red;} -
元素第一個字母或第一個漢字
格式:元素名稱+":first-letter"+{聲明塊} 例子: p:first-letter{color:red;}注:為了解決兼容性(有的瀏覽器不識別),偽元素選擇器,建議打兩個冒號