css的三大特性:层叠,继承、优先级以及权重的计算

html-css016

css的三大特性:层叠,继承、优先级以及权重的计算,第1张

三大特性:层叠性、继承性、优先级

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突问题。

在这里会显示的颜色为pink,字体大小为20px。

子标签会继承父标签的某些样式

在这里p标签会显示红字,20px。

行高的继承

当同一个元素指定多个选择器,就会有优先级的产生

p为白色因为继承权重为0,无论父类是什么权重都不继承。

所以如果要给a设置样式就要单独设置一个a的样式。

这里显示的为蓝色,因为权重大。

最终大猪蹄子的颜色为红色,大肘子和猪尾巴为蓝色。

怎么理解?

简单说就是父元素的样式,在子元素上可以生效。如:

body{font-size:14px}

<body>

<p>这里显示的字号为14px</p>

</body>

像上面的,我不用对p标签进行定义字体的大小,但是因为body(父元素)做了一个font-size:14px的设置,所以p(子元素)自然会继承了字体14px的大小。

还有,要了解继承性,那就要先了解那些属性具有继承性,哪些没有。

这里人家问了个例

http://zhidao.baidu.com/question/57841814.html

下面的参考地址,具体自己看。

元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式作用在元素上就会产生优先级权重的问题。

零、属性后面使用!important,权重最大,会覆盖页面内任何位置定义的元素样式。

一、内联样式,权重为1000【写在HTML元素的style属性中】

二、ID选择器,权重为0100【非内联样式】

三、类、伪类、属性选择器,权重为0010【非内联样式】

四、标签、伪元素选择器,权重为0001【非内联样式】

五、通配符、子选择器、相邻选择器等,权重为0000【非内联样式】

六、继承的样式没有权重

注意

没有权重 权重为0 权重为0 的权重比 没有权重 的大,优先级高

1、 选择器中 ID选择器 的权重【a = 数量 * 权重】

2、 选择器中 类、伪类、属性选择器 的权重【b = 数量 * 权重】

3、 选择器中 标签、伪元素选择器 的权重【c = 数量 * 权重】

4、 最终的权重w = a + b + c

运行截图

width:宽度【块级元素的会继承父类的内容宽度contentwidth,】

color:字体的颜色