CSS3常用選取器（一）

標籤：內容   文字   偽類   value   名稱   生效   style   應該   gre   

　　在 CSS 中，選取器是一種模式，用於選擇需要添加樣式的元素。比如最常用到的#id，.class，標籤選取器。

　　隨著CSS3到來，增加了很多新型選取器，這裡就常用的做一個總結。

　　1.屬性選取器。

　　在css3中，追加了三個屬性選取器，分別為[attribute*=value],[attribute^=value],[attribute$=value],使選取器有了萬用字元的概念。這三個選取器分別是包含，首字元，結束字元。

舉個栗子：

a[src*="abc"]表示選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。

a[src^="https"]表示選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。

a[src$=".pdf"]表示選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。

 

　　2.結構性偽類別選取器

　　CSS3 結構性偽類別選取器，包含偽類別選取器和虛擬元素選取器。偽類別選取器在css中就存在，不再贅述。在虛擬元素選取器中包含 first-line、first-letter、before、after。

first-line顧名思義，應該是對某個元素中的第一行使用樣式。

first-letter是對某個元素的首字母使用樣式。

before用於在某個元素之前插入內容。

after用於在某個元素之後插入內容。

 

p:first-line{      color:red;  /*將p元素第一行內容變為紅色*/}p:first-letter{      color:blue;  /*將p元素首個文字變為藍色*/}li:before{　　content:"--";  /*給每一個li元素內容前面加上"--"*/}li:after{　　content:"這是對列表的解釋";  /*給每一個li元素內容後面加上一段文字*/　　font-size:18px;　　color:green;  /*可以加上一些樣式以區分*/}

 

<p>第一行<br/>第二行</p>

<ul>
　　<li>列表1</li>
　　<li>列表2</li>
　　<li>列表3</li>
　　<li>列表4</li>
</ul>

 

3.CSS3 選取器 root、not、empty 和 target

　　CSS3 選取器 root、not、empty 和 target， root 選取器是綁定到頁面的根項目中，如果想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，可以使用 not，使用 empty 選取器來指定當元素中內容為空白時使用的樣式。

　　root 選取器是綁定到頁面的根項目中，根項目是指位於文檔中最頂層的元素，在頁面中就是指html的部分。如果此時還有body也設定了樣式，那麼body只在內容部份生效。

:root{      background-color:grey;/*頁面背景變成灰色*/  }
　　

　　

not用於排除：

div *not(h1){/*div中除h1以外都生效*/}

 

:empty{}用於當元素內容為空白時的樣式，比如用在表格中，設定空表格的樣式。

:target{}用於反白活動的 HTML 錨。

用法一：

p:target{ border: 2px solid #D4D4D4;background-color: #e5eecc;}

用法二：

:target{    background-color:pink;/*被選中的地區背景變為粉色*/}<a href="#a1">菜單一</a><a href="#a2">菜單二</a><div id="a1">    <h1>標題</h1>    <p>內容</p>   </div><div id="a2">    <h1>標題</h1>    <p>內容</p>   </div>

URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被連結的元素就是目標元素(target element)。

:target 選取器可用於選取當前活動的目標元素。

CSS3常用選取器（一）