四、偽類和偽元素的區別？聊一下css選擇器的優先級 · 40個JavaScript面試必考點

## 一、偽類 ### 1、定義 > The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. 偽類存在的意義是為了通過選擇器，格式化DOM樹以外的信息以及不能被常規CSS選擇器獲取到的信息。 ### 2、要點 - 格式化DOM樹以外的信息。比如： `<a>` 標簽的`:link`、`:visited` 等。這些信息不存在于DOM樹中。 - 不能被常規CSS選擇器獲取到的信息。比如：要獲取第一個子元素，我們無法用常規的CSS選擇器獲取，但可以通過 `:first-child` 來獲取到。 ![](http://nhfcloms-deveopler.oss-cn-beijing.aliyuncs.com/dwwb/portal/project/1635152238868/3959476-d0668990bb347f24.png) ## 二、偽元素 ### 1、定義 > Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content). 偽元素可以創建一些文檔語言無法創建的虛擬元素。比如：文檔語言沒有一種機制可以描述元素內容的第一個字母或第一行，但偽元素可以做到(`::first-letter`、`::first-line`)。同時，偽元素還可以創建源文檔不存在的內容，比如使用 `::before` 或 `::after`。 ### 2、常見的偽元素選擇器 - `::first-letter` 選擇元素文本的第一個字（母） - `::first-line` 選擇元素文本的第一行 - `::before` 在元素內容的最前面添加新內容 - `::after` 在元素內容的最后面添加新內容 - `::selection`匹配被用戶選中或者處于高亮狀態的部分 - `::placeholder`匹配占位符的文本，只有元素設置了 placeholder 屬性時，該偽元素才能生效 ## 三、偽類和偽元素的區別 #### 1、偽類是為了彌補CSS選擇器的不足，用來更方便地獲取信息 ``` <ul> <li>test1</li> <li>test2</li> </ul> li:first-child { color: #f00; } // 選擇器不能直接選取第一個子元素 // 偽類彌補了選擇器的不足 ``` #### 2、偽元素本質上是創建了一個虛擬容器(元素)，我們可以在其中添加內容或樣式 ``` .first-letter { color: #f00; } <p> <span class="first-letter">H</span>ello, World </p> ``` 上面的代碼其實就是： ``` p::first-letter { color: #f00; } ``` 除了上面這個本質區別以外，在CSS3中，偽類用單冒號:表示；而偽元素用雙冒號::表示。 ## 四、偽類和偽元素的主要用法 ### 1、偽類 #### （1）`:first-child` 匹配第一個子元素 ``` li:first-child { color: #f00; } <ul> <li>test1</li> <li>test2</li> </ul> ``` #### （2）`:last-child` 匹配最后一個子元素 ``` <ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> li:last-child { color: #f00; } ``` #### （3）`:first-of-type` 匹配屬于其父元素的第一個特定類型的子元素 ``` p:first-of-type { color: #f00; } <div> <h1>h1文本</h1> <p>p文本</p> </div> ``` #### （4）`last-of-type` 匹配屬于其父元素的最后一個特定類型的子元素 ``` h1:last-of-type { color: #f00; } <div> <h1>h1文本</h1> <h1>h1文本2</h1> <p>p文本</p> </div> ``` ### 2、偽元素 #### （1）`::before` 在被選元素之前插入內容；`::after` 在被選元素之后插入內容 ##### 清除浮動 ``` .clearAll::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clearAll { zoom : 1; } ``` ##### 畫分割線 ``` * { padding: 0; margin: 0; } .spliter::before, .spliter::after { content: ''; display: inline-block; border-top: 1px solid black; width: 200px; margin: 5px; } </style> </head> <body> <p class="spliter">分割線</p> </body> ``` ##### 計數器使用CSS實現計數器，用到的屬性有： - counter-reset: 屬性設置某個選擇器出現次數的計數器的值。默認為 0 - counter-increment: 屬性設置某個選取器每次出現的計數器增量。默認增量是 1 - content: 插入生成內容 ``` .chooses { counter-reset: letters; } .chooses input:checked { counter-increment: letters; } .choose span::after { content: counter(letters); } <div class="chooses"> <input type="checkbox">a <input type="checkbox">b <input type="checkbox">c <input type="checkbox">d <input type="checkbox">e <input type="checkbox">f <input type="checkbox">g <input type="checkbox">h <input type="checkbox">i <input type="checkbox">j </div> <p class="choose">我選擇了<span></span>個字母</p> ``` #### （2）`::first-letter` 匹配元素中文本的首字母 ##### ::first-letter巧妙控制羊角符號 ``` .price { display: inline-block; color: #FF5802; } .price::first-letter { margin-right: 5px; font-size: xx-large; vertical-align: -2px; } 原價：<span class="price">￥399</span> ``` ##### ::before偽元素與::first-letter偽元素共用一個選擇器 ``` p::before { content: '驗證：'; } p::first-letter { color: #f00; } <p>一個選擇器可以同時使用多個偽元素</p> ``` ## 五、css優先級 ### 1、不同級別 - 屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式 - 作為style屬性寫在元素內的樣式 - id選擇器 - 類選擇器 - 標簽選擇器 - 通配符選擇器 - 瀏覽器自定義或繼承 **總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性** ### 2、同一級別同一級別中后寫的會覆蓋先寫的樣式 ### 3、優先級算法（多個級別的組合） - !important 優先級最高 - 行內樣式的權值為 1000 - ID 選擇器的權值為 100 - 類選擇器、屬性選擇器、偽類選擇器的權值為 10 - 元素選擇器、關系選擇器、偽元素選擇器的權值為 1 - 通配符選擇器的權重為 0 ``` div.test { background-color:#00f; width:100px; height: 100px; } .test.test2 { background-color:#f00; width:100px; height: 100px; } <div class="test test2"></div> ``` 根據優先級算法中的規則對應做加法，比較權值，如果權值相同那就后面的覆蓋前面的，如果不同，權值大的覆蓋權值小的。`div.test` 的權值是1+10=11，而 `.test.test2` 的權值是10+10=20，所以div會應用 `.test.test2` 變成紅色要點： - !important的優先級是最高的，但出現沖突時則需比較”四位數“ - 優先級相同時，則采用就近原則，選擇最后出現的樣式 - 繼承得來的屬性，其優先級最低 **!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性** ## 六、CSS選擇器 ### 1. 子代選擇器　標簽嵌套只有一層關系 ``` div > a { color: red; } ``` ### 2. 后代選擇器標簽嵌套多層關系（包含一層） ``` div a { color: red; } ``` ### 3. 交集選擇器 ``` 交集選擇器,相交的部分就是要設置屬性值的標簽 1,格式: 選擇器1選擇器2...{ 屬性:值; } 2,注意點: (1),選擇器之間沒有任何的連接符號 (2),選擇器可以是標簽名稱,也可以是id、class名稱 (3),交集選擇器僅僅是了解 ``` ``` p.para1 { color: red; } ``` ### 4.并集選擇器 ``` 并集選擇器 1,格式: 選擇器1,選擇器2,...{ 屬性:值; } 2,注意點: (1),選擇器之間利用,連接 (2),選擇器可以是標簽名稱,也可以是id、class名稱 ``` ``` .ht,.para{ color: red; } ``` ### 5. 兄弟選擇器 ``` 兄弟選擇器,只選中同級的標簽 1,相鄰兄弟選擇(css2) 格式: 選擇器1+選擇器2{ 屬性:值; } 注意點: (1),相鄰選擇器必須用+鏈接 (2),相鄰選擇器只能選中緊跟后邊的那個標簽,不能選中被隔開的標簽 2,通用兄弟選擇器(css3),指定選擇器后邊特定的所有選擇器都被選中格式: 選擇器1~選擇器2{ 屬性:值; } ``` ``` h1+p{ color: red; } h1~p{ color: red; } ```