31

可以混合:nth-child()和after吗？

我有一个<ol>项目，我想添加一些文本:after。这很好用，但我想在第 1、第 2 和第 3 项以及第 4、第 5 和第 6 项上有不同的文本。

使用下面的代码，我最终li会在它后面加上粉红色的“大”。

这对我来说没有意义，但是我对这个恶意软件很nth-child陌生。

数据.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>

漂亮的.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 来做这件事，因为它只是一个“很高兴拥有”的功能。

我只担心新的浏览器，所以不需要 oldIE 等的解决方法。

4

3 回答 3

39

你可以，但你做错了..

你所有的p元素都在里面的问题li。所以他们都是他们li容器的第一个孩子。

您需要将 放在nth-child元素上li。

#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 的任何正整数或零值，并且有一个父元素。

更新 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），您可以

#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/

于 2012-12-19T17:10:42.870 回答
7

应该这样做：

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

JS小提琴。

...<p>始终是<li>所示 HTML 结构中的第一个子级。

但请注意，content: 'nom';第一个样式定义中的规则已被覆盖（但 'float' 规则仍然存在）：对于 ':after' 伪元素和其他伪元素的级联规则相同。)

于 2012-12-19T17:10:22.880 回答
2

你可以像这样组合psudeos......

#id li:nth-child(1)::before {
    border-left-color: red;
}
#id li:nth-child(2)::before {
    border-left-color: white;
}
#id li:nth-child(3)::before {
    border-left-color: blue;
}
于 2020-05-26T21:16:04.570 回答