1、 屬性選擇器、屬性和值選擇器
2、 相鄰兄弟選擇器
3、 後代選擇器(包含選擇器)
4、 子元素選擇器
5、 選擇器分組
1、屬性選擇器、屬性和值選擇器:
/*1、 為帶有 title 屬性的所有元素設定樣式: */
[title]
/*2、 為 title="haha" 的所有元素設定樣式: */
[title=haha]
/*3、 為 title的屬性值中包含指定詞彙的所有元素設定樣式,適用於由空格分隔的屬性值 */
[title~=haha]
/*4、 為 title屬性以指定值開頭的元素設定樣式,該值必須是整個單詞(不能是乙個單詞的一部分)適用於由連字元分隔的屬性值 */
[title|=haha]
2、相鄰兄弟選擇器:
可選擇緊接在另一元素後的元素,且二者有相同父元素
/* 選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素 */
h1 + p
3、後代選擇器(包含選擇器):
後代選擇器可以選擇作為某元素後代的元素,以空格分隔。
4、子元素選擇器:
子元素選擇器(child selectors)只能選擇作為某元素子元素的元素,不能隔代,用 「 > 」來指向子代
h1 > strong
5、選擇器分組):
用逗號分隔
CSS高階選擇器
css高階選擇器 例子 並集選擇器 p,h1 p和h1 標籤文字變紅色 交集選擇器 標籤選擇器 id 選擇器或者標籤選擇器 類選擇器 p.class1 類名為 class1 的p 標籤樣式中文字為黃色,當不同標籤使用相同類名時 後代選擇器 巢狀標籤 p span 注意兩者標籤中有空格的 this i...
css高階選擇器
css3高階選擇器 偽類選擇器 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth child...
CSS高階選擇器
舉例 123 其中a為類,a 1為偽類,偽類也是一種類,他們之間用宮格隔開 我們選擇該標籤的時候可以.a.a 1,也有.a,也可以.a 1常用的兩個偽類選擇器 偽類選擇器都是用 連線的 類名 nth of type n 先確定選擇器,在匹配位置 舉例 第1個p 第2個p 第3個p 第4個p 第5個p...