欢迎各位兄弟 发布技术文章

这里的技术是共享的

css nth-child after css 第几个元素 第几个子元素 伪元素 有大用

Is it possible to mix :nth-child() and after?

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.

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

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;
}

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

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

以前 不能正常的得到自已想要的结果

下面是正确答案


 

19down voteaccepted

You can, but you are doing it wrong..

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

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;
}
19down voteaccepted

You can, but you are doing it wrong..

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

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;
}

Quoting the W3C documentation

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.


Update 1

You could also simplify this by using

#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;
}

Demo at http://jsfiddle.net/gaby/4H4AS/2/


Update 2

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;
}

Demo at http://jsfiddle.net/gaby/4H4AS/3/

来自 http://stackoverflow.com/questions/13957498/css-nth-child-after
 

唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码