E:nth-child

最有用的CSS 3选择器,匹配E元素的父元素的第N个同级子元素。(来源: W3C)

HTML:

  1. <div>
  2. <p>Lorem ipsum dolor sit amet, consectetur</p>
  3. <p>Lorem ipsum dolor sit amet, consectetur</p>
  4. <p>Lorem ipsum dolor sit amet, consectetur</p>
  5. </div>

CSS:

  1. p{font-style:normal}
  2. p:nth-child(2){font-style:italic}
  3. p:nth-child(odd){color:green}

输出:

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

在这个例子中,第二个段落将会以斜体显示,而第一、三、五行(奇数)将会显示为绿色。