How to target all elements besides the first with nth-child?

此生再无相见时 提交于 2021-02-04 15:30:01

问题


How do I target all paragraphs inside a given DIV beside the first one using the :nth-child operator?

:nth-child(/* select all but the first one */) {
     color: green;
}
<div>
    <p>Example 1</p>
    <p>Example 2</p>
    <p>Example 3</p>
    <p>Example 4</p>
    <p>Example 5</p>
    <p>Example 6</p>
    <p>Example 7</p>
</div>

回答1:


You can use the following formula:

:nth-child(n+1)

or for some browsers:

:nth-child(n+2)

W3Schools says:

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Link

Or you can use separate :first-child CSS declaration for this first element.




回答2:


use

p:nth-child(n+2) {
    color: green;   
}

working DEMO

Reference




回答3:


Try

div > p:nth-child(n+2)

Demo at http://jsfiddle.net/Q6FDq/



来源:https://stackoverflow.com/questions/12193104/how-to-target-all-elements-besides-the-first-with-nth-child

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!