版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
分祖先样式和自身样式
如果既有祖先样式又有自身样式,前江后浪拍前浪,一代更比一代强,自身赢。
栗子:
<head>
<style>
.father{
color: red
}
</style>
</head>
<body>
<div class="father">
<div style="color:blue">颜色</div>
</div>
</body>
蚊子颜色为蓝色。
————————————————华丽的分割线—————————————————————
自身样式比较繁杂,需要根据CSS的7种选择器优先级确定
- ID选择器:例如 #id{}
- 类选择器: 例如 .class{}
- 属性选择器: 例如 a[href]{color:red},那么链接会是红色
- 伪类选择器,例如,:hover{}
- 伪元素选择器:例如,p::first-letter{color:red},那么p标签内第一个字颜色是红色
- 标签选择器:例如,span{}
- 通配选择器:例如,*{}
优先级:内联样式 > ID选择器 > class选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
——————————————————又一道华丽的分隔线————————————————
css优先规则:计算选择符中ID选择器的个数(a),类选择器的个数+属性选择器的个数+伪类选择器的个数(b),伪元素选择器的个数+标签选择器的个数(c),依次比较a,b,c,若a大,则不需要比较b,c,依次类推,若a,b,c都相等,则“就近原则”。
栗子:
#id .class {color: yellow;} // ①
div .class {color: red;} // ②
因为①中id>②中年id数量,所以此栗子中的文字是yellow
———————————————————华丽再现—————————————————————
css样式里的boss,!important
#id .class {color: yellow;} // ①
div .class {color: red !important;} // ②
这个栗子里蚊子颜色是红色.
参考:https://www.runoob.com/w3cnote/css-style-priority.html