关于CSS后代选择器 与 优先级的问题
<html><head><style>div#bluepspan{color:blue;}div#redspan{color:red;}</style></head><b...
<html>
<head>
<style>
div#blue p span{color:blue;}
div#red span{color:red;}
</style>
</head>
<body>
<div id="blue">
<p><span>你好</span></p> '显示为蓝色
</div>
<div id="red">
<span>你好</span> '显示为红色
</div>
</body>
</html>
上述代码中div#blue p span{color:blue;} 优先级为id + 3*类型选择器 = 100+3=103
而div#red span{color:red;}优先级为 id + 2*类型选择器 = 100+2 =102 低于上面的
按照优先级规则来说 2个span标签 应该使用优先级高的 而结果一个显示为红色 另一个显示为蓝色
为什么会这样 是否CSS后代选择器不受 优先级的影响 求高手解答
详解 展开
<head>
<style>
div#blue p span{color:blue;}
div#red span{color:red;}
</style>
</head>
<body>
<div id="blue">
<p><span>你好</span></p> '显示为蓝色
</div>
<div id="red">
<span>你好</span> '显示为红色
</div>
</body>
</html>
上述代码中div#blue p span{color:blue;} 优先级为id + 3*类型选择器 = 100+3=103
而div#red span{color:red;}优先级为 id + 2*类型选择器 = 100+2 =102 低于上面的
按照优先级规则来说 2个span标签 应该使用优先级高的 而结果一个显示为红色 另一个显示为蓝色
为什么会这样 是否CSS后代选择器不受 优先级的影响 求高手解答
详解 展开
3个回答
展开全部
不是优先级的问题
style中div#blue 和div#red 以及限定了style的应用范围
前者只能用在id为blue的div中，后者只能用在id为red的div中
所以会一个显示蓝色，一个显示红色
style中div#blue 和div#red 以及限定了style的应用范围
前者只能用在id为blue的div中，后者只能用在id为red的div中
所以会一个显示蓝色，一个显示红色
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你用的ID选择器只能控制本容器里的SPAN
这2个容器互不相干啊！
是不是我理解有问题...
这2个容器互不相干啊！
是不是我理解有问题...
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果要显示两个都是红色的
那么就这么改
div#red span{color:red;}=====div#red,#blue span{color:red;}
因为div#red span{color:red;}这个只规定了id="red"里面的span是红色的 并没有规定id="blue"里面的span是红色的，所以
<div id="blue">
<p><span>你好</span></p> '显示为蓝色
</div>
这里面继承的是div#blue p span{color:blue;}这个里面的span 包括p也是一样的
那么就这么改
div#red span{color:red;}=====div#red,#blue span{color:red;}
因为div#red span{color:red;}这个只规定了id="red"里面的span是红色的 并没有规定id="blue"里面的span是红色的，所以
<div id="blue">
<p><span>你好</span></p> '显示为蓝色
</div>
这里面继承的是div#blue p span{color:blue;}这个里面的span 包括p也是一样的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
