CSS三大特性之层叠性

原创 2016年08月28日 21:57:08

       CSS三大特性之二层叠性,什么是层叠行,层叠性就是浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将背层叠掉,前提是选择器的权重一样,也就是说这些选择器的优先级相同,后面的博客会讲优先级,这里先考虑优先级相同。


       有如下代码,先给body设置颜色为红色,然后再给div设置为绿色,最后给h2设置蓝色,运行后可以发现最后h2中的字体为蓝色,这就说明h2的颜色样式将bodydiv的颜色样式给层叠掉了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: red;
        }
        div {
            color: green;
        }
        span {
            color: blue;
        }

    </style>
</head>
<body>
   <div>
       <span>hello world!</span>
   </div>
</body>
</html>

       如果在body样式中添加 font-size: 20px; 根据前面所讲的span会继承这一样式,字体会变大,由此可以看出,当多个选择器定义的规则不发生冲突时,则元素会应用所有选择器定义的样式,只会层叠掉发生冲突的样式。


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS三大特性继承性,层叠性,优先级

一、继承性1)什么是继承性? 给父元素设置一些属性,子元素/后代也可以使用,这个我们称之为继承性。 2 ) 并不是所有属性都可以继承的,那么有哪些属性具有继承性? 只有以color/font-/te...

CSS的两大特性之继承性和层叠性

1.继承性     css的继承性指的是子元素会继承父元素的某些样式属性。例如在父元素定义字体颜色(color属性),子元素会继承父元素的字体颜色,不过,并不是所有的属性都会被子元素继承,如margi...

css的三大特性(继承,层叠,优先级)

一,继承 24-css三大特性之继承性.html div{ color: red; font-size:...

css 的三大特性 继承,层叠,优先级

css的三大特性 继承,层叠,优先级 1.css 的继承    (1).继承:某个属性从父元素传递到子元素的机制    (2).继承的意义:不用为每个元素指定的属...

css三大特性继承、层叠和优先级(权重)

1 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅...

CSS选择器及其继承特性、层叠特性

CSS选择器及其继承特性、层叠特性 1.基本选择器   标记  id  class  这个就不再作介绍了 2.复合选择器   交集  交集选择器由两个选择器直接连接构成,其结果是选中二者...

css层叠性,优先级问题

层叠性:就是css处理冲突的能力。层叠性是一种能力 层叠性的应用是 当多个选择器描述了同一个属性的时候,这个属性到底应该听谁的? 先举个栗子: ...

CSS继承性及层叠性

我们知道,对于面向对象开发语言, 比如:Java、C++、JavaScript、C#等的都有一个非常重要的特性,也就是继承性。那么在CSS中也有这样的特性。CSS继承性CSS中父元素的一些属性能够被其...

html css层叠样式基础(常用选择器)(三)

1.常用选择器: /* 为所有的p元素,设置一个字体大小为30px 元素选择器 - 作用:可以选中页面中的所有的指定的元...

css层叠性规则

一、当有多个样式规则应用到同一个元素时,应该优先选择哪个规则呢?   在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则。  各种选择...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三大特性之层叠性
举报原因:
原因补充:

(最多只允许输入30个字)