多个选择器选中同一个标签且属性相同时需要看权重来确定被谁控制。
这里选择一个a(超链接)标签来进行研究:
先用element选择器进行样式设计,再这种情况在,此超链接标签只受element选择器的控制。
<style>
a{
color: rgb(13, 81, 81);
background-color: rgb(244, 189, 107);
}
</style>
<body>
<a href="">超链接标签</a>
</body>
接下来我们加入类选择器classa:
此时超链接标签的样式已经变成由类选择器来控制了
由此可见类选择器的优先级要大于element选择器,在标签样式的设置上,这两个标签可以很方便的进行设置。
再加入id选择器后,id选择器的内容被表现出来,说明id选择器权重大于前两个。
得到了id>class>element
选择的等级越详细,权重越高。但是认为规定的!important是不受权重限制的,是权重最高的!!!
最后得到的权重值:行内样式>id>class>element。