HTML5基础——12、CSS三大特性

最新推荐文章于 2025-11-25 13:59:03 发布

原创最新推荐文章于 2025-11-25 13:59:03 发布 · 1.6k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5。
之前学习了很多CSS的写法，可能有人已经注意到一个问题。一个元素可能会被多种选择器选中，如果各个选择器都指定了显示样式，这个元素应该怎样显示呢？
这里来学习一下CSS的三大特性。

一、层叠性

先看例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px solid black;
      text-align: center;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    div {
      background-color: red;
    }

    div {
      background-color: green;
    }
  </style>
</head>

<body>
  <div></div>
</body>

显示效果：
在这里插入图片描述

这个例子里面，在style标签里，定义了3次div的background-color，最终显示出来的效果，是绿色，所以冲突的时候，以后面的属性为准。第一个div里面指定了边框、对齐方式、宽高，而后面的div并没有指定这些属性，这些属性也生效了。
所以可以总结一下CSS层叠性的特点：

如果重复指定了相同的属性，造成了冲突，会以后面指定的属性覆盖前面的
如果属性没有冲突，则不会产生层叠，会保留属性。
这个特点可以通过Chrome调试工具看出来：

在调试工具里面，由于指定了多次div的background-color，所以有2次的颜色被划掉了，只保留了最后一次的。然而没有冲突的属性，是一直生效的。

二、继承性

先看例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 40px;
    }
  </style>
</head>

<body>
  <div>
    Hello World!
    <span>span1</span>
    <span>span2</span>
  </div>
  <span>span3</span>
</body>

显示效果
在这里插入图片描述

可以看出，我在style里面指定了div的字体大小，然后在下面的body里面，作为div子级的span的字体大小也跟着div变化了，但没有作为div的子级的span，字体没有发生变化。
这可以总结出继承特性的特点，就是如果子级没有指定某个样式时，会继承父级的样式。
这个特性可以方便我们做一些统一的默认设置。比如，对于内容来说，顶级的标签一般都是body，我们可以在body指定一些默认的参数，比如字体、颜色等，这样整个body下面所有的子元素都会生效。

三、优先级

先看例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .box {
      background-color: yellow;
    }

    #box3 {
      background-color: green;
    }
  </style>
</head>

<body>
  <div>我是元素</div>
  <div class="box">我是类</div>
  <div id="box3" class="box">我是id</div>
  <div style="width: 100px; height: 100px; background-color: red;" id="box3" class="box">我是行内样式</div>
</body>

显示效果：
在这里插入图片描述

先看style里面，定义了3种选择器的样式

div {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.box {
  background-color: yellow;
}

#box3 {
  background-color: green;
}

然后看body里面，第一个

<div>我是元素</div>

由于它只是指定了元素标签，没有类，也没有id，所以它会显示div的样式，也就是蓝色。
再看第二个

<div class="box">我是类</div>

这里指定了类，所以会显示.box的样式，也就是黄色。
再看第三个

<div id="box3" class="box">我是id</div>

这里有div标签，有id，有类box，最后显示的效果是绿色，这证明了id的优先级是比类要高的。
看最后一个

<div style="width: 100px; height: 100px; background-color: red;" id="box3" class="box">我是行内样式</div>

这里包含了div标签、id和类，但最后却直接使用了行内指定的样式。所以行内样式的优先级是比id还高的。
还有一个更高优先级的，比如我把刚才的例子改成：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: blue !important;

    }

    .box {
      background-color: yellow;
    }

    #box3 {
      background-color: green;
    }
  </style>
</head>

<body>
  <div>我是元素</div>
  <div class="box">我是类</div>
  <div id="box3" class="box">我是id</div>
  <div style="width: 100px; height: 100px; background-color: red;" id="box3" class="box">我是行内样式</div>
</body>