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