如何使用CSS3 :only-child 选择器
1、CSS3 :only-child 的应用实例。代码规定了唯一子元素。
p:only-child{background:#ff0000;}
2、完整的style流程。代码只对规定的元素发生作用。
<style>
p:only-child
{
background:red;
}
</style>
</head>
<body>
<div>
这是一个段落。
</div>
<div>
<span>这是一个 span。</span>
这是一个段落。
</div>
</body>
3、CSS3 :nth-child() 选择器，这个代码可以对于规定的子元素的序号进行定义。代码当中是第二个。
p:nth-child(2){background:#ff0000;}
4、通过实例可以得知，这个序号不仅仅是数字，还可以定义一个奇偶。
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
5、特殊用法。我们可以把几个元素分成一组，再从中选择第二个 子元素！三个元素一组，中间的元素样式有变。
p:nth-child(3n+0){background:#ff0000;}
6、CSS3 :nth-last-child() 选择器。这就是一个倒数的概念，从最后一个子元素开始往回数，从而确定真正的选择元素。
p:nth-last-child(2){background:#ff0000;}
p:nth-last-child(3n+0){background:#ff0000;}
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：129
阅读量：149
阅读量：139
阅读量：20
阅读量：87