本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
1.首先介绍一下CSS内联 内联css也叫做行级css或行内css，它是直接在标签内使用 [CSS] 纯文本查看 复制代码 1 <body>
2 <span style="color: red;">我是span块</span>
3 </body>
.各种选择器3.进入主题，了解选择器优先级计算公式每位写过各种选择器的学习者来说，都总结过一个大众的规律： 内联>ID选择器>类选择器>标签选择器 其实关于优先级有一个计算公式，在《CSS REFACTORING》一书中提过
A specificity is determined by plugging numbers into (a, b, c, d): - If the styles are applied via the style attribute, a=1; otherwise, a=0.
- b is equal to the number of ID selectors present.
- c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
- d is equal to the number of type selectors and pseudoelements present.
什么意思呢？我给大家解读一下
优先级是通过将数字插入（a，b，c，d）中来确定的： - 如果内联样式属性应用样式，则a = 1; 否则，a = 0。
- b等于存在的ID选择器的数量。
- c等于存在的类选择器，属性选择器和伪类的数量。
- d等于存在的标签选择器和伪元素的数量。
（现在知道上面科普各类选择器的意义了吧0.0），说了这么多还是有人看不明白，直接上个例子吧
[HTML] 纯文本查看 复制代码 <style>
#div1 .a1 {color: red;}
#div1 .a1:link {color: blue;}
.div1 .a1 {color: yellow;}
.a2 {color: red;}
</style>
<body>
<div id="div1" class="div1">我是一个div
<a href="#" class="a1">链接</a>
</div>
<a href="#" class="a2">链接</a>
</body>
#div1 .a1对应的（a,b,c,d）a=0,b=1,c=1+0+0=1,d=0,故（0,1,1,0）
#div1 .a1:link对应的（a,b,c,d）=（0,1,2,0），所以比#div1 .a1优先级高
同理 .div1 .a1=（0,0,2,0）,所以比#div1 .a1优先级低
| 
发表于 2020-3-20 20:00:00
照妖镜