继承(inheritance):是一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程称作层叠(cascade)。
特殊性 权重
选择器的特殊性:特殊性值(权重):0000
- ID: 0100
- 类属性、属性选择、伪类: 0010
- 元素、伪元素: 0001
- 结合符、通配选择器没有作用 空格 + >这些符号没有啥作用主要还是看是元素类ID
- 内联样式 1000
权重计算:
h1{colo:red;} /*权重 = 0001*/
p em{color:red;}/*权重 = 0002*/
.grape{color:red;}/*权重 = 0010*/
*.bright{color:red;}/*权重 = 0010*/
p.bright em.dark{color:red;}/*权重 = 0022*/
#id123{color:red;}/*权重 = 0100*/
div#sidebar *[href]{color:red;}/*权重 = 0111*/
下面的例子:
html > body table tr[id="totals"] td ul > li{color:red;}/* 0017 [id="totals"]这个为0010*/
li#answer{color:blue;}/*0101*/ /*这个强调一下li#answer是li的id为answer,而li #answer是li后代有id:answer*/
内联样式 style=""是
最大的权重为1000
重要性 !
!important超过其他声明 记住分号之前插入
h2#title{font-size:10px !important;color:red;}
<h2 id="title" style="font-size:40px;color: green;">重要性栗子!!!</h2>
上面显示的是10px绿色字体
继承
样式会应用到它的后代元素,但是有些属性不能被继承,例如horder,大多数盒模型属性不能被继承(外边距 内边距 背景和边框)
0特殊性比无特殊性强
*{color:blue;}
h1#page{color:red;}
<h1 id="page">特殊性例子<em>0特殊性</em></h1>
em元素颜色蓝色,不会继承,因为用了*通配符,默认指定了蓝色了。 通配符0特殊性
层叠
P89。。