【黑马前端—CSS基础】CSS三大特性
程序员文章站
2024-01-27 17:30:28
...
参考b站的黑马程序员pink老师
由我收集整理总结
总结：
层叠性(相同的选择器)：（一个世界允许不同的人存在，不允许同样的人存在）
相同的选择器给设置了相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题，
继承性：子标签会继承父标签的与文字相关的样式（text-、font-、line-、以及color）
用法：恰当地使用继承可以简化代码，降低css样式的复杂性：比如可以给body设置属性
优先级：给同一个元素指定了多个选择器，就会有优先级产生。
- 如果选择器相同，则执行层叠性
- 如果选择器不同，则根据选择器权重执行
- 对于权重的理解：
（费的事越多，权重却高，如果是继承的话，什么都不用做，最轻松，所以权重最低，元素选择器稍微麻烦一点，要特别写个选择器，而类选择器在写法上比元素选择器多了一个‘.’，而且还要多写个‘class’，所以更麻烦，ID选择器虽然和类选择器写法差不多，但是只能出现一个，所以比类选择器的权重更高一点，而如果选择了行内选择器，就不得不在需要的地方重新再写一遍样式，所以是最麻烦的一种写法，所以权重更高。而最后一个‘！important’就说明最重要了，人家都说了，不用比了）
优先级注意事项：
- 权重是由4位数字组成，但是不会有进位
- 2.可以理解为类选择器永远大于元素选择器，id永远大于类，以此类推
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值
注意：这三个特性是可以交叉实现的，就比优先级
层叠性(相同的选择器)
相同的选择器给设置了相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
原则：
如果样式冲突，就遵循就近原则，那个样式离结构近，就执行哪个样式
样式不冲突，不会重叠
<style>
div {
color: red;
width: 100px;
height: 100px;
font-size: 66px;
}
div {
color: black;
width: 100px;
height: 100px;
}
</style>
继承性
子标签会继承父标签的某些样式，文字相关的样式，如文本颜色和字号（text-、font-、line-、以及color），恰当地使用继承可以简化代码，降低css样式的复杂性：比如可以给body设置属性
结果：
行高的继承
行高可以不跟单位，意为当前行高为当前字大小的x倍。这样写的优势是里面的子元素可以根据文字大小自动调整行高。
比如：当前line-height=1.5X14px=24px
<style>
body {
font:15px/1.5 '微软雅黑';
}
div {
font-size：14px；
}
</style>
优先级
给同一个元素指定了多个选择器，就会有优先级产生。
- 如果选择器相同，则执行层叠性
- 如果选择器不同，则根据选择器权重执行
（费的事越多，权重却高，如果是继承的话，什么都不用做，最轻松，所以权重最低，元素选择器稍微麻烦一点，要特别写个选择器，而类选择器在写法上比元素选择器多了一个‘.’，而且还要多写个‘class’，所以更麻烦，ID选择器虽然和类选择器写法差不多，但是只能出现一个，所以比类选择器的权重更高一点，而如果选择了行内选择器，就不得不在需要的地方重新再写一遍样式，所以是最麻烦的一种写法，所以权重更高。而最后一个‘！important’就说明最重要了，人家都说了，不用比了）
优先级注意事项： - 权重是由4位数字组成，但是不会有进位
- 2.可以理解为类选择器永远大于元素选择器，id永远大于类，以此类推
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值
权重叠加
就像这里，.nav li,ul li 和li 同时作用于li上，
.nav li的权重为0011，
ul li的权重为0002，
li的权重为0001，所以li的颜色为紫色
<style>
.nav li{
color: blueviolet;
}
ul li {
color: red;
}
li {
color: blue;
}
</style>
<body>
<ul>
<li>helloworld</li>
</ul>
</body>
例子：