問題描述

:nth-child() 和 after 可以混用嗎?

我有一個 <ol> 項目，我想在 :after 之后添加一些文本.這很好用，但我希望在第 1、第 2 和第 3 項以及第 4、第 5 和第 6 項上使用不同的文本.

I have an <ol> of items and I want to add some text :after. This works fine but I'd then like to have different text on 1st, 2nd and 3rd items and then 4th, 5th and 6th as well.

使用下面的代碼，我最終得到每個 li 后面都有粉紅色的大".

With the below code I end up with every li having 'large' in pink after it.

這對我來說沒有意義，但是我是這個 nth-child 的新手.

This doesn't make sense to me however I am new to this nth-child malarky.

data.html

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol> 

pretty.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

我真的不想用 js 來做這件事，因為它只是一個很高興擁有"的功能.

I'd really like not to do this with js as it just a 'nice to have' feature.

我只擔心新的瀏覽器，所以不需要 oldIE 等的解決方法.

I'm only worried about new browsers so no need for workarounds for oldIE etc.

推薦答案

你可以，但是你做錯了..

You can, but you are doing it wrong..

所有 p 元素都在 li 內的問題.所以他們都是他們的 li 容器的第一個孩子.

The issue that that all your p elements are inside li. So all of them are the first child of their li container.

您需要將 nth-child 放在 li 元素上.

You will need to put the nth-child on the li elements.

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

<小時>

引用W3C 文檔

:nth-child(an+b) 偽類表示法表示在文檔樹中具有一個+b-1 個兄弟的元素，例如n 的任何正整數或零值，并且具有父元素.

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

<小時>

更新 1

您也可以使用

#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}

演示在 http://jsfiddle.net/gaby/4H4AS/2/

更新 2

如果您只希望前六個不同(而不是前 3 個和后 3 個)，您可以

If you want the first six only to be different (and not first 3 and last 3) you could

#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}

演示在 http://jsfiddle.net/gaby/4H4AS/3/

這篇關于css :nth-child() :after的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！