給鏈接定義樣式
a:link 表示尚未訪問的鏈接,鼠標(biāo)未劃過和點(diǎn)擊
a:visited 表示已經(jīng)訪問的鏈接
a:hover 表示鼠標(biāo)劃入的鏈接
a:active 表示激活的鏈接,也就是鼠標(biāo)點(diǎn)擊鏈接的一瞬間
注意上面這四個(gè)鏈接的偽類在使用的時(shí)候要有一定的順序,即上面列舉的順序,否則看不到效果。可以簡單記為LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。
給段落定義樣式
:first-letter 為一行中的第一個(gè)字符創(chuàng)建樣式
:first-line 為一段中第一行創(chuàng)建樣式
更多偽類和偽元素
:before 可以在指定元素的前面添加內(nèi)容。比如有一個(gè)段落p,你要在前面添加"Hello",可以用偽類表示為p:before {content: "Hello";}
:after 和:before一樣,只不過實(shí)在元素的后面添加內(nèi)容。
但是IE6, IE7不支持content屬性。
:first-child 選取其他元素的第一個(gè)子元素,這里容易引起混淆。比如有下面的一段代碼:
復(fù)制代碼代碼如下:
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</p>
那么,li:frist-child將會選取所有ul標(biāo)簽下的第一個(gè)li標(biāo)簽,也就是上面兩個(gè)內(nèi)容為第一行的li標(biāo)簽,而不是選擇li標(biāo)簽的第一個(gè)子元素
:focus 這個(gè)偽元素與鏈接的:hover相似,只不過:hover為鏈接專用,而這個(gè)可以用于其他的元素,表示當(dāng)元素獲得焦點(diǎn)時(shí)應(yīng)有的樣式
高級選擇器
子選擇器
">"可用來作為子選擇器。當(dāng)要選取一個(gè)元素的子元素時(shí),可以使用這個(gè)符號。比如有下面一段代碼:
復(fù)制代碼代碼如下:
<p>
<ul>
<li>第一級</li>
<li>
<ul>
<li>第二級</li>
</ul>
</li>
</ul>
</p>
p>ul 只會選擇第一個(gè)ul標(biāo)簽,而不會選擇第二個(gè)ul標(biāo)簽,因?yàn)樗皇莗標(biāo)簽的子元素,而是li標(biāo)簽的子元素。如果要達(dá)到選擇這兩個(gè)ul標(biāo)簽,可以是p ul。這樣p標(biāo)簽下面所有的ul標(biāo)簽都會被選中。這種形式選取的是p標(biāo)簽下面的所有子孫元素。
同胞選擇器
"+"可用來作為同胞選擇器。在HTML中,緊挨另一個(gè)標(biāo)簽出現(xiàn)的標(biāo)簽被稱為鄰近同胞標(biāo)簽,如:
復(fù)制代碼代碼如下:
<body>
<h1>標(biāo)題</h1>
<p>段落</p>
</body>
p標(biāo)簽緊鄰h1標(biāo)簽,因此p標(biāo)簽為h1的同胞標(biāo)簽,可以通過h1+p來選擇。
屬性選擇器
在屬性選擇器中,用[]包含要選擇的屬性,如:
新聞熱點(diǎn)
疑難解答
圖片精選