CSS继承与权重解析-优快云博客

CSS继承和权重

知识点1.CSS继承性

就像父亲的财产可能会遗传给儿子一样，在CSS中祖先元素的样式同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。
比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。
当然并不是所有的样式都会被继承，

       哪些属性能继承？
	color、 text-开头的、line-开头的、font-开头的。
	这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。

<!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;}