CSS继承和权重
知识点1.CSS继承性
就像父亲的财产可能会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。
比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。
当然并不是所有的样式都会被继承,
哪些属性能继承?
color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承</title>
<style>
#box{
color:#f9f;
font-size:20px;
line-height:100px;
font-weight:700;
font-style:italic;
text-align:center;
background:#ff0;
width:500px;
height:100px;
border:2px solid #000;
margin:0 auto;
}/* 100 */
li{}/* 1 */
</style>
</head>
<body>
<div id="box">
<ul>
<li>猜猜我的颜色</li>
</ul>
</div>
</body>
</html>
子类会继承父类的css样式
知识点2.CSS权重
在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
比如:
body h1
h1
上边的两个选择器都会选择h1元素,如果两个选择器设置的样式不一致那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用那个样式呢?CSS中会默认使用权重较大的样式,权重又是如何计算的呢?
不同的选择器有不同的权重值:
内联样式:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
通配符:权重是 0
计算权重需要将一个样式的全部选择器相加,比如上边的body h1的权重是2,h1的权重是1,所以第一个选择器设置的样式会优先显示。
!important作用是提高指定CSS样式规则的应用优先权。
color: blue!important;
优先级为:
!important >行内样式表> id > class > 标签 >全局
内联样式表的优先级最高
内部样式表与外部样式表的优先级和书写顺序有关,后书写的优先级别高;
选择符的优先级:
定义:选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。
内联样式的权重为 1000
id选择符的权重为 0100
class选择符的权重为 0010
伪类选择符的权重为 0010
元素选择符的权重为 0001
继承样式的权重为 0000
后代选择符的权重:为后代选择符的权中之和
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择符权重2</title>
<style>
html body div#box ul.list li.lix.lix.lix.lix.lix{background:#0FF;}/* 165 */
html body div#box ul.list li.lix{background:white;}/* 125 */
html body div#box .list .lix{background:skyblue;}/* 123 */
html body #box .list .lix{background:pink;}/* 122 */
#box .list .lix{background:green;}/* 120 */
#box li{background:black;}/* 101 */
ul .lix{background:orange;}/* 11 */
.lix{background:gray;}/* 10 */
div ul li{background:blue;}/* 3 */
ul li{background:yellow;}/* 2 */
li{background:red;}/* 1 */
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="lix">继续猜猜我的背景颜色</li>
</ul>
</div>
</body>
</html>
官大一级压死人
#box ul li{background:yellow;}
#box ul li.two{background:red;}