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的三大特性(继承,层叠,优先级)

一,继承 24-css三大特性之继承性.html div{ color: red; font-size:...
  • haha_hello
  • haha_hello
  • 2017年02月10日 17:51
  • 1287

css层叠性规则

一、当有多个样式规则应用到同一个元素时,应该优先选择哪个规则呢?   在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则。  各种选择...
  • sinat_30764971
  • sinat_30764971
  • 2016年07月21日 23:50
  • 284

java提高篇(二)-----理解java的三大特性之继承

在《Think in java》中有这样一句话:复用代码是Java众多引人注目的功能之一。但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情。在这句话中最引人注...
  • chenssy
  • chenssy
  • 2013年10月16日 19:37
  • 20562

CSS的三大特性记录

CSS三大特性包括继承性、层叠性、优先级。
  • chenlinwei5
  • chenlinwei5
  • 2017年02月06日 21:33
  • 178

0426-CSS三大特性之层叠性

1.什么是层叠性? 作用: 层叠性就是CSS处理冲突的一种能力 注意点: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性 CSS全称 Cascading ...
  • LPDFIGHT
  • LPDFIGHT
  • 2017年05月06日 21:54
  • 145

[CSS]CSS的继承性、层叠性、权重

CSS像艺术家一样优雅,像工程师一样严谨继承性CSS样式具有继承性,所谓的继承性,就是给某些元素设置样式时,后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color属性设置字体颜色,后代自...
  • xf616510229
  • xf616510229
  • 2016年12月13日 22:33
  • 1302

多线程三大特性

多线程编程中三个特性 标签: 多线程 2016-04-25 12:27 1560人阅读 评论(0) 收藏 举报 分类: java(6) 版权声明:本文为博主原创文章,未经...
  • fmm_sunshine
  • fmm_sunshine
  • 2017年09月25日 13:46
  • 258

Java三大特性总结

一、继承: 一个类继承另一个类,则继承的类为子类,被继承的类为父类。它的目的就是实现代码的复用。子类继承父类后就自动拥有了父类的属性和方法,但是,父类的私有属性和构造方法并不能被继承。另外,继承...
  • u011641865
  • u011641865
  • 2016年04月10日 23:12
  • 893

Java的三大特性浅谈

众所周知,Java面向对象的三大特性是封装、继承、多态。 封装:指的是类、属性、方法的封装,把功能相同的代码封装成类或者方法。 继承:指的是一个类从另外一个类中获得属性和方法的过程。 多态:指的...
  • y15883626567
  • y15883626567
  • 2015年05月06日 17:52
  • 373

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

继承性作用给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性注意点: 1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 2...
  • soindy
  • soindy
  • 2017年03月14日 14:17
  • 296
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS三大特性之层叠性
举报原因:
原因补充:

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