标签选择器的坑

最新推荐文章于 2024-07-10 10:14:49 发布

划船不用桨--

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量183

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43663349/article/details/121798975

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

:nth-child

要实现的效果：第三个p标签为红色

    <style>
        p:nth-child(3){
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <a href="#"></a>
        <p>3</p>
        <p>4</p>
        <p>5</p>

    </div>
 </body>

以上代码并不能实现第三个p标签为红色的效果，

 p:nth-child(3){
            color: red;
        }

该段css的意思并不是：第三个p标签为红色
而是：选择body下p标签的兄弟元素的第三个，然后再去确定它是不是p标签，如果是p标签那就变红，也就是是只有满足两个条件才会变红
1. 第三个元素
2. 同时是p标签

input不支持伪元素

从元素本身：

input元素的内容模型为空，没有独立的闭合标签，无法容纳别的标签作为自身的子元素

从选择器本身:before{content:””;} 和 :after{content:””;}

:before和:after伪元素指定生成的内容的样式和位置。
-:before和:after伪元素指定了一个元素文档树内容之前和之后的内容。'content’属性，与这些伪元素联用，指定了插入的内容。
一个元素文档树内容之前和之后的内容就是指这个元素是要可以插入内容的，也就是说这个元素要是一个容器

从浏览器本身

input，img，iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。但是在Chrome 中checkbox和radio可以插入，通过浏览器的解析,这两种类型在浏览器中解析后的结构为对标签,而这又与第一点矛盾,所以这应该是浏览器的Bug了，或者就是在浏览器解析时,结构已经违背了html标签的规范

划船不用桨--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签选择器的坑

要实现的效果：第三个p标签为红色 <style> p:nth-child(3){ color: red; } </style></head><body> <div> <p>1</p> <p>2</p> <a href="#"></a> .
复制链接

扫一扫