libowen0 2019-06-27
概念:级联(The cascade),CSS是Cascading Style Sheet的简写,说明级联是非常重要的。从表层来看,级联表明CSS规则的顺序问题,但是级联远比这个复杂,在所有的选择器中摸个选择器定义的规则是否能够胜出(既优先级)取决于三个元素:Important,Specificity,Source order。
在css规则的值末尾添加“!Important”能够保证该规则优先其它规则,但是一般不建议使用“!Important”,因为它会改变联级的工作方式,使得调试变得困难。
例如: <style> #winning{ background-color:red; border:1px solid black; } .better{ background-color:gray; border:none !Important; } </style> <p class="better">This is a paragraph.</p> <p class="better" id="winning">One selector to rule them all</p>
通过四个特性值来量化一个选择器
2.1. Thousands
Inline style(嵌入式样式),即直接写在元素里面,加1,0,0,0 例: <h1 style=”color:#fff;”>
2.2. Hundreds
包含在一个选择器中所有的ID选择器 例:#div
2.2. Tens
包含在一个选择器中的所有 类属性选择器,类选择器,伪类选择器 例:.classes、[attributes]、#focus:hover
2.4. Ones
包含在一个选择器中的所有元素选择器,伪元素选择器 例: ::after
如果多个竞争选择器具有相同的重要性和特性值,代码顺序就发挥作用了,后来规则优先前面规则。
CSS中有些规则将会默认被子元素继承,有些则不会。比如font系列属性,文本系列属性、列表系列属性,cursor
CSS提供了三个特殊的值用来处理继承
1) inherit 继承父元素的样式 2) initial 不继承。应用浏览器的默认样式 3) unset 不设定,表现该规则本来特性,即如果该规则具有继承属性则继承,否则不继承。
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT