发表新帖
发表新帖

How to skip first child?

后端 未结
关注
6 834
误落风尘
误落风尘 2020-12-03 02:30 
    
  
 one 
    
  
 two 

  
 three 

  

        

                      

              相关标签:
6条回答
  • 难免孤独
    2020-12-03 03:00

    Works everytime and doesn't need undoing:

    p + p {
  /* do 15 special things */
}

    It takes every P that was preceded by a P. Don't set a property to undo it later. You should only add, if you can help it, not subtract.

    0 讨论(0)
  • 感动是毒
    2020-12-03 03:00

    :nth-child(1n+2) worked well for me. This skips the first child and continues to the rest of the elements. 

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

    Hope this helps.

    0 讨论(0)
  • 深忆病人
    2020-12-03 03:10

    With the negation pseudo-class:

    p:not(:first-child) { color: red; }

    Browser support is very strong now, but alternatives include:

    p { color: red; }
p:first-child { color: black; }

    and:

    * + p { color: red; }
    0 讨论(0)
  • 误落风尘
    2020-12-03 03:10

    Quentin's :not() solution works great for modern browsers:

    p:not(:first-child) { color: red; }

    His alternative for older browsers also works well, except it makes use of an overriding rule for the first child. It's not required, however...

    You can simply use a sibling selector to apply the same rule as the one above, without the need to override it for p:first-child. Either one of these rules will work:

    • The adjacent sibling selector, which matches any p that comes directly after a p:

      p + p { color: red; }

    • The general sibling selector, which matches any p that comes anywhere after a p:

      p ~ p { color: red; }

    Both combinators work identically here; the subtle differences between them only apply when you have other elements in the mix. Refer to the links provided for details.

    0 讨论(0)
  • 别那么骄傲
    2020-12-03 03:13

    I think :nth-child() will do the trick.

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

    This styles all of the p tags except for the first because it starts on the 2nd child. You could then style the first p tag separately with p:first-child.

    0 讨论(0)
  • 遥遥无期
    2020-12-03 03:16

    You can also use "tilde" ( ~ ) operator

    <!DOCTYPE html>
<html>
<head>
    <style> 
    p ~ p {
        background:#ff0000;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>


</body>
</html>

    Here is the JSFiddle demo http://jsfiddle.net/RpfLa/344/

    Did a quick test on FF 17, Chrome 23, Safari 5.1, IE9, IE1-8 on compaitbility mode

    0 讨论(0)
 看不清?
提交回复
热议问题