CSS3的高階選擇器在開發中還是蠻有用的，下面我們來看一下都有哪些高階選擇器。

1、相鄰兄弟選擇器

作用：匹配指定元素的相鄰【下一個】兄弟元素

語法：由 + 號來充當連線符，如 選擇器1+選擇器2

示例：html程式碼如下

<div id="d1">
   <div id="d2">我是d2</div>
   <p id="p1">我是p1</p>
   <ul id="u1">
      <li>HTML</li>
      <li>css</li>
      <li>
 
Javascript</li>
   </ul>
   <ul id="u2">
      <li>HTML</li>
      <li>css</li>
      <li>Javascript</li>
   </ul>
</div>

#p1+#u1{background:#f00;}

2、通用兄弟選擇器

作用：匹配到某元素【後面的】 【所有指定】兄弟元素

語法：由~充當結合符，如 選擇器1~選擇器2

示例：

我們用通用兄弟選擇器選擇id為p1的元素後面所有的ul元素，將其背景設定為紅色

#p1~ul{background:#f00;}

3、屬性選擇器

3.1、[attribute]:匹配具有attribute屬性的元素

如：div[id]:匹配所有具備id屬性的div

3.2、element[attr1][attr2] 匹配所有具備attr1屬性以及attr2屬性的element元素

如：div[id][class] 匹配同時具備id和class屬性的div

3.3、element[attr=value] 匹配attr屬性值為value的element元素

如：input[type=text] 或 input[type='text']，匹配type為text的input元素

3.4、element[attr~=value] 匹配attr屬性值為一個值列表，並在此列表中包含單詞value的element元素

如：

<div class="content warning important lf"></div>

div[class~=content]:   能匹配
div[class~=lf]:              能匹配
div[class~=on]:           不能匹配

3.5、element[attr^=value] 匹配attr屬性值，以value開始的element元素

如：div[class^=my]: 匹配class屬性值以my開始的div元素

3.6、element[attr$=value] 匹配attr屬性值，以value作為結束的element元素

如：div[class$=over]: 匹配class屬性值以over作為結束的div元素

3.7、element[attr*=value] 匹配attr屬性值中【包含】value的element元素

如：div[class*=on] 匹配class屬性值中包含on的div元素

4、偽類選擇器

4.1、目標偽類：突出顯示活動的錨點元素

語法：:target

如：

a:target{}

div:target{}

4.2、元素狀態偽類：多數用在表單控制元件上，去匹配表單控制元件的不同狀態

4.2.1、:enabled       匹配每個已啟用元素（所有表單控制元件）

4.2.2、:disabled      匹配每個被禁用元素（所有表單控制元件）

4.2.3、:checked      匹配每個已被選中的input元素（適用radio和checkbox）

4.3、結構偽類：從標記的層次結構來匹配元素

4.3.1、:first-child     匹配屬於父元素中的首個子元素

4.3.2、:last-child     匹配屬於其父元素中的最後一個子元素

4.3.3、:empty          匹配沒有子元素（包含文字內容）的元素

4.3.4、:only-child   匹配屬於其父元素中的唯一子元素

4.3.5、:nth-child(n)匹配屬於其父元素中的第n個子元素

4.4、否定偽類：將匹配的元素排除在外

語法：:not(selector);

5、偽元素選擇器

5.1、::first-letter    獲取匹配元素的第一個字母（字元）

5.2、::first-line      獲取匹配元素的首行

5.3、::selection    匹配使用者選取的部分

注意：W3C規定所有的偽類選擇器全部使用一個冒號，在CSS3中，所有的偽元素選擇器，全部使用兩個冒號。