css 基礎 - nth-of-type

時間 2019-12-04

標籤 css 基礎 nth type 欄目 CSS 简体版

原文原文鏈接

看以下代碼，若是你知道哪些內容會以紅色輸出，說明你應該有不錯的基礎，反正我是至關暈菜的（實事求是 😭）。css

<h3><code>.line:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-a .line:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap">
    <p class="line hello">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line hello">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line hello">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

結果以下，不知你是否正確？這篇的目的就是搞懂這些小知識點，否則對不起幾年搬磚留下的「腰肌勞損」。html

nth-of-type

這個 CSS 僞類匹配文檔樹中在其以前具備 an+b-1 個 相同兄弟節點的元素，其中 n 爲正值或零值。簡單點說就是，這個選擇器匹配那些在相同兄弟節點中的位置與模式 an+b 匹配的相同元素。

依舊混乎乎，仍是結合幾個例子看下：前端

p:nth-of-type(2n+1)

<h3><code>p:nth-of-type(2n+1)</code></h3>
<style>
    .wrap p:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

這個 demo 可能發現不出本身的問題，畢竟符合預期顯示了符合 奇數規則的 p 標籤。css3

.line:nth-of-type(2n+1)

2n+1 是取 符合條件的奇數 標籤（我試過 2n-1 也結果一致，若是不對請 issue ）web

和上面不一樣，標籤 p 換成了 樣式選擇器 .line ，那哪些符合條件？微信

<h3><code>.line:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-a .line:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-a">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

原覺得和上例同樣，會相似按照 .line 取奇數行作顯示，結果卻不是。 wordpress

其實 .line:nth-of-type(2n+1) 是按照元素類型作個集合，而後再根據不一樣的集合取符合奇數規則的顯示。這就解釋了爲什麼 p 和 div 都有顯示。而非揉在一塊兒間隔顯示。 spa

tips: 注意 nth-of-type 的描述， 相同兄弟節點的元素code

.hello:nth-of-type(2n+1)

爲了證實上例的猜測，用了 .hello 選擇器作區分，確認了 標籤類別 和僞類共同決定哪些顯示。htm

<h3><code>.hello:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-b .hello:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-b">
    <p class="hello">id:1---p1</p>
    <div class="hello">id:2---div1</div>
    <p class="hello">id:3---p2</p>
    <!-- 雖 .hello 奇數，但 p 標籤偶數。未顯示 -->
    <div class="">id:4---div2 <span style="padding-left:10px">未顯示</span></div>
    <p class="hello">id:5---p3</p>
    <!-- 雖 .hello 偶數，但 div 標籤奇數。顯示 -->
    <div class="hello">id:6---div3 <span style="padding-left:10px">顯示</span></div>
    <p class="">id:7---p4</p>
    <div class="hello">id:8---div4</div>
    <div class="hello">id:9---div5</div>
</div>

注意： id:3---p2 內容沒有顯示； id:6---div3 顯示了。

這兩個內容所在標籤都被 .hello 樣式選擇器選中。

前者 id 雖符合奇數規則，但標籤 p 倒是第二個（偶數），因此沒有輸出紅色。

同理：後者 id 雖符合偶數規則，但標籤 div 是第三個（奇數），因此輸出紅色。

.line:nth-of-type(2)

<h3><code>.line:nth-of-type(2)</code></h3>
<style>
    .wrap-c .line:nth-of-type(2) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-c">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

結合以前例子，就能知道爲什麼這兩行顯示。

.line:nth-child(2)

<h3><code>.line:nth-child(2)</code></h3>
<style>
    .wrap-d .line:nth-child(2) {
        font-size: 16px;
        font-weight: bold;
        color: greenyellow;
    }
</style>
<div class="wrap-d">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
</div>

和 nth-of-type 不一樣， child 是根據父節點下，和僞元素匹配的元素， 且不會按照相同元素 作區分。

最佳實踐

在使用上，不管 :nth-of-type 仍是 :nth-child 最好都在前面加個父類的選擇器：

selector :nth-of-type

這樣有個好處，不至於因爲沒控制好「分寸」致使樣式影響到其餘地方。

以下：（.wrap-test 只是由於區分其餘 demo）好比開發者本地想實現父標籤 .test-parent1 下第三個 p 標籤顯示粉色（.wrap-test .test-parent1 :nth-child(3)），結果遺漏了父標籤 .test-parent1，致使 .test-parent1 和 .test-parent2 都作了顯示。

<h3><code>無父類修飾</code></h3>
<style>
    .wrap-test :nth-child(3) {
        font-size: 16px;
        font-weight: bold;
        color: pink;
    }
</style>
<div class="wrap-test">
    <div class="test-parent1">
        <p>id:1---p1</p>
        <p>id:2---p2</p>
        <p>id:3---p3</p>
        <p>id:4---p4</p>
    </div>
    <div class="test-parent2">
        <p>id:1---p1</p>
        <p>id:2---p2</p>
        <p>id:3---p3</p>
        <p>id:4---p4</p>
    </div>
</div>