CSS的继承性、层叠性、特殊性

最新推荐文章于 2024-07-18 10:04:43 发布

火焰小能猫

最新推荐文章于 2024-07-18 10:04:43 发布

阅读量195

点赞数

分类专栏：知识点文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_29910567/article/details/109198904

版权

知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本节重点

1.继承性

在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

如你父亲是双眼皮，你母亲是单眼皮，那么你是双眼皮，那么你就是继承了父亲的双眼皮。

拿到我们实际的代码中应用，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>继承性</title>
  <style type="text/css">
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    我是你们<span>阿豪</span>,这里是<span>学习资料专栏</span>
  </div>

</body>
</html>

那么该颜色不仅仅应用在了div标签，还应用与div标签中的所有子元素(包括div中的文本和span包含的文本)文本。

注意：某些属性是可以继承下来的，比如常见的color、font系列的、text-*系列的等等。

但有些属性是不可以继承下来的，比如border:1px solid green;

给div设置border:1px solid green;之后发现，div有条实心边框线，但是子元素span包含的文本根本就没起到作用。

网站应用：比如我们在去设计网站的时候，网站统一的字体颜色为gray,字体大小为14px。那么我们可以很好的利用css的继承性来实现此效果。

代码如下：

body{
    color:gray;
    font-size:14px;
}

2.特殊性

在之前我们学习了那么多的选择器，那么大家是否有疑问呢？比如，如果我对同一个元素来设置了不同的css样式代码之后，那么元素会启用哪个css样式呢？以我过来人的经验，学到这里的同学，大部分都认为是启用最后面编写的。那么我们接下来看个案例：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
      }
      #wrap{
        color:green;
      }
      .box{
        color:yellow;
      }

    </style>

  </head>
  <body>
    <p class='box' id="wrap">
      我是小阿豪，猜猜我是什么颜色
    </p>
  </body>
</html>

效果展示：

我是小阿豪，猜猜我是什么颜色

会发现结果是绿色的，这是因为什么呢？因为浏览器是根据权值来判断使用哪种css样式的，权值高的它的优先级会越高，就会呈现那种css样式，

css权值的规则：

有一个这样的结构：

<div class='wrap1' id='box1'>
    <div class="wrap2" id="box2">
        <p class='active'>MJJ</p>
    </div>
</div>

举几个例子看看他们的权值：

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/

由此可以看出，其实对于权值的计算来说，首先它是不进位的，对于使用的选择器我们无非就是在数数，数选择器的数量(按照顺序来，先是id再是class，再是元素)，比如：

/*权值为 1  1  1*/
#box1 .wrap2 div{
    color:red;
}

注意：继承来的属性也有权值，不过它的权值非常低，有的文档提出它只有0.1,所以可以理解为继承的权值最低。

3.!important

我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>!important的使用</title>
  <style type="text/css">
    div{
      color:green !important;
    }
  </style>
</head>
<body>
  <div id="box" style="color:red;">
    <span>小阿豪</span>
  </div>

</body>
</html>

注意：!important要写在分号的前面

效果发现文本变为了绿色。但是使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。

什么情况下可以使用!important?

第一种

你的网站上有一个设计了全站样式的css文件
同时你或者你的小伙伴写了一些很差的内联样式

第二种

#box p { color: blue; } p.awesome { color: red; }

火焰小能猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的继承性、层叠性、特殊性

本节重点1.继承性在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。如你父亲是双眼皮，你母亲是单眼皮，那么你是双眼皮，那么你就是继承了父亲的双眼皮。拿到我们实际的代码中应用，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g..
复制链接

扫一扫