关于css选择器层叠性和继承性问题

ReaF_star 2019-04-22 11:05:15

能分析下下面代码为什么最后结果字体颜色显示为蓝色嘛？



<!DOCTYPE html>

<html>



    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div div div div div div div div div div div div {

                color: yellow;

            }



            .one {

                color: blue;

            }

        </style>



    </head>



    <body>

        <div>

            <div>

                <div>

                    <div>

                        <div>

                            <div>

                                <div>

                                    <div>

                                        <div>

                                            <div>

                                                <div>

                                                    <div class="one">请问这行文字是什么颜色的

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>



</html>

...全文

1264 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

ReaF_star 2019-04-28

打赏
举报

id选择器》类选择器》标签选择器，这个问题还是关于选择器权重的问题，我这里是被权值相加的概念误导了。相对应权值如下： id 100 类 10 标签 1 我以为是两个选择器的权值比较，就将他们简单的相加了，其实这样是错误的，因为权重不存在进位对于上面例题的权重是这样的12个div的权重是（0，0，12）后面类选择器的权重是（0，1，0）其实（0，1，0）》（0，0，12），即对应位相比较，先比较id选择器的权重，再比较类选择器的权重，最后比较标签选择器的权重，若最后两者权重相等，则采用就近原则。

luj_1768 2019-04-26

打赏
举报

写那么多div，效果就是把自己累倒了。系统处理这种代码的速度很快。

007RoBot 2019-04-25

打赏
举报

引用 20 楼 007RoBot的回复:

选择器. 权重值！important infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素. 1 通配符 0

权重是按照权重值相加之和来比较大小的

007RoBot 2019-04-25

打赏
举报

选择器. 权重值！important infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素. 1 通配符 0

007RoBot 2019-04-25

打赏
举报

选择器. 权重值！important infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素. 1 通配符 0

爱欣 2019-04-24

打赏
举报

行内样式＞ID选择器＞类选择器＞标签选择器

爱欣 2019-04-24

打赏
举报

兄弟.p根本获取不到好吧.是类选择器

sh__w 2019-04-23

打赏
举报

就算是继承和非继承也不能说明是class 的优先级比标签高，虽然理论如此，但找不到实际来论证。这样，把class和标签看成同级放在任何条件下都是实用，所以我认为人为把它们分级不过多此一举。

sh__w 2019-04-23

打赏
举报

引用 8 楼天际的海浪的回复:

[quote=引用 6 楼 sh__w 的回复:] [quote=引用 5 楼天际的海浪的回复:] 如下面例子会是蓝色，就是因为class选择符的优先级权重高于标签选择符 .one { color: blue; } p{ color: yellow; } <div class="one"> <p class="one">请问这行文字是什么颜色的</p> </div>

你这个class本来就比标签近，不具有说服力，我可以把它理解为p渲染之后，class又渲染了一次，就如同下面2比1近显示2的绿色 .one { color: blue; } .two{ color:green } p{ color: yellow; } </style> </head> <body> <div > <p class="one two">请问这行文字是什么颜色的</p> </div> [/quote] 那我问你，如果改成下面这样为什么是蓝色了


p.one {
                color: blue;
         }
.two{
       color:green
}
p{
        color: yellow;
    }


<div >
        <p class="one two">请问这行文字是什么颜色的</p>
 </div>

[/quote] p.one和p .one显示的颜色根本不一样，两个组合起来拥有更高的权限了，自然不会显示two的颜色。

天际的海浪 2019-04-23

打赏
举报

引用 11 楼 sh__w 的回复:

就算是继承和非继承也不能说明是class 的优先级比标签高，虽然理论如此，但找不到实际来论证。这样，把class和标签看成同级放在任何条件下都是实用，所以我认为人为把它们分级不过多此一举。

我对你真是无语了，你不是来捣乱的吧。不听别人的讲解，什么都按自己想当然的理解来。如果不是来捣乱的，可以去看看css选择器优先级权重的教程，下面这篇讲解的比较好 https://www.cnblogs.com/cnblogs-jcy/p/8574177.html

ぃ白龙丶 2019-04-23

打赏
举报

引用 9 楼天际的海浪的回复:

[quote=引用 7 楼 sh__w 的回复:]
[quote=引用 4 楼天际的海浪的回复:]

你这个例子和楼主的不一样，楼主的例子
div div div div div div div div div div div div {
color: yellow;
}
选择的标签包含<div class="one">

而你的 .one {color: blue;}选择的只是div标签，不包含p标签。
只不过color属性有继承特征。p标签原本会是继承父标签的蓝色。但继承的优先级低于标签选择符才会是黄色。

还有你说选择的只是div标签，不包含p标签，告诉我下面这是蓝色还是黑色。
<style type="text/css">
.one {
color: blue;
}
</style>
</head>

<body>
<div class="one">
<p >请问这行文字是什么颜色的</p>
</div>[/quote]

我上面不是说了，color属性有继承特征。p标签color会继承父标签的color。p标签的color得自继承，不是得自.one的选择。继承的样式优先级是非常低的。
如果改成设置 border。就只div标签有边框，p标签没有边框，这就是选择的只是div标签，不包含p标签。

<style type="text/css">

.one {

	border: 4px solid red;

         }

</style>

</head>



<body>

<div class="one">

	div中文字

        <p>	中文字</p>

	div中文字

</div>

[

引用 11 楼 sh__w 的回复:

就算是继承和非继承也不能说明是class 的优先级比标签高，虽然理论如此，但找不到实际来论证。这样，把class和标签看成同级放在任何条件下都是实用，所以我认为人为把它们分级不过多此一举。

你这能把楼上哪大哥气死。。。回去好好研究一下权重计算好吧。。。。

ぃ白龙丶 2019-04-23

打赏
举报

引用 11 楼 sh__w 的回复:

就算是继承和非继承也不能说明是class 的优先级比标签高，虽然理论如此，但找不到实际来论证。这样，把class和标签看成同级放在任何条件下都是实用，所以我认为人为把它们分级不过多此一举。

？？你在说什么啊。。。。选择器有优先级啊。！import>style>id>类>元素>*>继承>默认；
而且可以通过权重值来计算啊，值大的优先，值相等就近。

天际的海浪 2019-04-22

打赏
举报

引用 7 楼 sh__w 的回复:

[quote=引用 4 楼天际的海浪的回复:] 你这个例子和楼主的不一样，楼主的例子 div div div div div div div div div div div div { color: yellow; } 选择的标签包含<div class="one"> 而你的 .one {color: blue;}选择的只是div标签，不包含p标签。只不过color属性有继承特征。p标签原本会是继承父标签的蓝色。但继承的优先级低于标签选择符才会是黄色。

还有你说选择的只是div标签，不包含p标签，告诉我下面这是蓝色还是黑色。 <style type="text/css"> .one { color: blue; } </style> </head> <body> <div class="one"> <p >请问这行文字是什么颜色的</p> </div>[/quote] 我上面不是说了，color属性有继承特征。p标签color会继承父标签的color。p标签的color得自继承，不是得自.one的选择。继承的样式优先级是非常低的。如果改成设置 border。就只div标签有边框，p标签没有边框，这就是选择的只是div标签，不包含p标签。

<style type="text/css">
.one {
	border: 4px solid red;
         }
</style>
</head>

<body>
<div class="one">
	div中文字
        <p>	中文字</p>
	div中文字
</div>

天际的海浪 2019-04-22

打赏
举报

引用 6 楼 sh__w 的回复:

[quote=引用 5 楼天际的海浪的回复:] 如下面例子会是蓝色，就是因为class选择符的优先级权重高于标签选择符 .one { color: blue; } p{ color: yellow; } <div class="one"> <p class="one">请问这行文字是什么颜色的</p> </div>


p.one {
                color: blue;
         }
.two{
       color:green
}
p{
        color: yellow;
    }


<div >
        <p class="one two">请问这行文字是什么颜色的</p>
 </div>

sh__w 2019-04-22

打赏
举报

引用 4 楼天际的海浪的回复:

你这个例子和楼主的不一样，楼主的例子 div div div div div div div div div div div div { color: yellow; } 选择的标签包含<div class="one"> 而你的 .one {color: blue;}选择的只是div标签，不包含p标签。只不过color属性有继承特征。p标签原本会是继承父标签的蓝色。但继承的优先级低于标签选择符才会是黄色。

还有你说选择的只是div标签，不包含p标签，告诉我下面这是蓝色还是黑色。 <style type="text/css"> .one { color: blue; } </style> </head> <body> <div class="one"> <p >请问这行文字是什么颜色的</p> </div>

sh__w 2019-04-22

打赏
举报

引用 5 楼天际的海浪的回复:

如下面例子会是蓝色，就是因为class选择符的优先级权重高于标签选择符 .one { color: blue; } p{ color: yellow; } <div class="one"> <p class="one">请问这行文字是什么颜色的</p> </div>

天际的海浪 2019-04-22

打赏
举报

如下面例子会是蓝色，就是因为class选择符的优先级权重高于标签选择符 .one { color: blue; } p{ color: yellow; } <div class="one"> <p class="one">请问这行文字是什么颜色的</p> </div>

天际的海浪 2019-04-22

打赏
举报

引用 3 楼 sh__w 的回复:

[quote=引用 2 楼天际的海浪的回复:] 因为class选择符的优先级权重高于标签选择符

并不是class的优先级权重高于标签，我赞同一楼的说法,下面例子显示黄色就能说明。 .one { color: blue; } .p{ color: yellow; } <div class="one"> <p >请问这行文字是什么颜色的</p> </div> [/quote] 你这个例子和楼主的不一样，楼主的例子 div div div div div div div div div div div div { color: yellow; } 选择的标签包含<div class="one"> 而你的 .one {color: blue;}选择的只是div标签，不包含p标签。只不过color属性有继承特征。p标签原本会是继承父标签的蓝色。但继承的优先级低于标签选择符才会是黄色。

sh__w 2019-04-22