WEB前端学习:CSS学习_CSS特性

CSS特性

该篇讲得是CSS特性。主要的就是优先级，当样式规则发生冲突时，到底改执行那条

一、优先级

CSS规则优先级

1.重要性

加了 !importan 标识的赋值权重高于没加的

2.规则的来源

默认情况下：开发者开发 > 用户设置 > 浏览器设置
添加 !importan 标识：浏览器设置 > 用户设置 > 开发者开发

3.规则添加方式

行内样式表权重大于其他样式

4.选择器特指度

ID > Class > Type ，I-C-T 值越大优先级越高
伪类选择器和类选择器权重相同

ul li {
    color: red;
}
li {
    color: blue;
}

权重是可以叠加的，ul>li 相对于两个标签选择器，所以 I-C-T的值为 0-0-2，而 li 的 I-C-T的值为 0-0-1，最后显示的是红色（red）

5.规则顺序

越晚设置的优先级越高

重要性 > 规则的来源 > 规则添加方式 > 选择器特指度 > 规则顺序

二、继承

对于可以继承的属性，默认情况下，子类会继承父类该属性的值
继承的权重为 0

tips：“ * ” 的权重最低

持续更新…

该篇主要讲的是CSS特性。

最后，若有不足或者不正之处，欢迎指正批评，感激不尽！如果有疑问欢迎留言。

往期博客

• CSS中的单位
• CSS规则基本语法
• CSS选择器
• font 和 text 相关属性
• 盒子模型
• 背景图片相关属性

下面这些是我学习CSS的网站，希望对大家有帮助

• CSS Reference(https://cssreference.io/)
• MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS)
• 菜鸟教程(https://www.runoob.com/css/css-tutorial.html)