溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“CSS3偽類選擇器的標(biāo)志性符號是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3偽類選擇器的標(biāo)志性符號是什么”文章吧。
CSS3在CSS2基礎(chǔ)上，增強(qiáng)或新增了許多特性， 彌補(bǔ)了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。
比如說，同樣是一個頭像，可能在低版本的瀏覽器中，頭像方的；在高版本的瀏覽器中，頭像是圓的。
由于CSS3普遍存在兼容性問題，為了避免因兼容性帶來的干擾，瀏覽器的建議版本為：
在查看CSS參考手冊時，需要注意以下符號：
比如說，{1,4}表示可以設(shè)置一至四個參數(shù)。
下面講CSS3的基礎(chǔ)知識。本文講一下 CSS3 選擇器的內(nèi)容。
我們之前學(xué)過 CSS 的選擇器，比如：
``` div 標(biāo)簽選擇器
```
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準(zhǔn)度。CSS3選擇器與 jQuery 中所提供的絕大部分選擇器兼容。
屬性選擇器的標(biāo)志性符號是 []。
匹配含義：
^：開頭 $：結(jié)尾 *：包含
格式：
比如說，我們用屬性選擇器去匹配標(biāo)簽的className，是非常方便的。
這里我們用class屬性來舉例。代碼舉例：
```html <!DOCTYPE html>
CSS3-屬性選擇器
簡介
E[attr]
E[attr~=attr]
E[attr|=attr]
E[attr*=val]
E[attr^=val]
E[attr$=val]
```
最后來張表格：
偽類選擇器的標(biāo)志性符號是 :。
CSS中有一些偽類選擇器，比如:link、:active、:visited、:hover，這些是動態(tài)偽類選擇器。
CSS3又新增了其它的偽類選擇器。這一小段，我們來學(xué)習(xí)CSS3中的結(jié)構(gòu)偽類選擇器：即通過結(jié)構(gòu)來進(jìn)行篩選。
1、格式：（第一部分）
理解：
（1）這里我們要好好理解父元素的含義，它指的是：以 E 元素的父元素為參考。
（2）注意：以上選擇器中所選到的元素的類型，必須是指定的類型E，如果選不中，則無效。這個要好好理解，具體可以看CSS參考手冊中的E:nth-child(n)的示例。我們可以理解成：先根據(jù)選擇器找到選中的全部位置，如果發(fā)現(xiàn)某個位置不是類型E，則該位置失效。
（3）另外，E:nth-child(n)這個屬性也很有意思。比如，針對下面這樣一組標(biāo)簽：
html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul>
上方代碼中：
上面列舉的選擇器中，我們只要記?。?n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
2、格式：（第二部分）
既然上面這幾個選擇器帶有type，我們可以這樣理解：先在同級里找到所有的E類型，然后根據(jù) n 進(jìn)行匹配。
3、格式：（第三部分）
舉例：
我們可以把多個偽類選擇器結(jié)合起來使用，比如：
如果想把上圖中，第一行的前三個 span 標(biāo)紅，我們可以這樣使用結(jié)構(gòu)偽類選擇器：
css dt:first-child span:nth-of-type(-n+3) { color: red; }
最后來張表格：
偽元素選擇器的標(biāo)志性符號是 ::。
1、格式：（第一部分）
E:after、E:before在舊版本里是偽類，在 CSS3 這個新版本里是偽元素。新版本里，E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理。
舉例：
```html <!DOCTYPE html>
生命壹號
```
效果如下：
上圖可以看出：
2、格式：（第二部分）
E::first-letter 的舉例：
E::first-line的舉例：
最后來張表格：
以上就是關(guān)于“CSS3偽類選擇器的標(biāo)志性符號是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
