CSS3 :nth-child() 选择器的坑

规定属于其父元素的第二个子元素的每个 p 的背景色


<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

此伪类选择器是先找父元素再从父元素向下找子元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 刚开始学习选择器,一开始对伪类选择器确实有点懵。昨天晚上自己动手写了写,终于是慢慢搞懂了。下面对一些容易误解的一些...
    婷楼沐熙阅读 2,518评论 4 7
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,838评论 0 4
  • 1标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS盒子模型:由四个属性组成的外边距(margi...
    秦小婕阅读 1,223评论 0 1
  • 现在基本能控制小凛和小满儿因为玩具的问题争吵了,偶尔发生也能引导小凛好好说,两人很快就能和好。我现在最大的问题是:...
    Piyogaga阅读 213评论 0 1