一、继承性:
继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
/* 不具有继承性的css样式: */p{border:1px solid red;}
二、特殊性(优先级?)
定位一个元素,选择器的特殊性值则是决定哪一个胜出的关键。 其形式(不在代码中体现)如:0,0,0,1/1,1,0,1/0,0,0,3/….
主要有四个规则:
- 用了ID ,则 +0,1,0,0;
- 用class、属性(如[id=”btn1”])、伪类(如:hover) +0,0,1,0;
- 元素和伪元素(如::before) 加0,0,0,1;
- 结合符对特殊性没有贡献,而通配符的贡献是0,0,0,0.(所以他们对总特殊性没有影响);
几个例子:
p{font-style: normal} /* 0,0,0,1 */ body div p{font-style:italic} /* 0,0,0,3 */(winner) html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */ li#answer {color: navy} /* 0,1,0,1 /* (winner)
题外话:css中 内联样式(直接写在标签中的) > 嵌入样式(写在<head></head>中的) > 外部样式(<link></link>导入的)
三、层叠
后面的样式会覆盖前面的样式
四、总结
内联样式>id>class;
如果特殊性相同,后定义的规则优先;
时间: 2025-01-02 20:03:07