CSS常用选择器-持续更新中

HTML代码

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

CSS选择第一个子元素:

article > p:first-child {
  background:red;
}

CSS选择第二个子元素:

article > p:nth-child(2)
{
  background:red;
}

CSS选择最后一个子元素:

article > p:last-child {
  background:red;
}

css选择器奇数偶数:

article > p:nth-child(odd)  #CSS选择奇数行
{
  background:red;
}
article > p:nth-child(even) #CSS选择偶数行
{
  background:green;
}

注意:如需选择DIV中的元素将article更改为div 例:div > p:first-child同样适用于:first-child :last-child :nth-child,如需选择非段落P的元素更改为相应的元素标签即可。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据