继承与层叠的用法

最新推荐文章于 2023-04-12 15:28:43 发布

Mr._Dang

最新推荐文章于 2023-04-12 15:28:43 发布

阅读量68

点赞数 1

分类专栏：小白基础文章标签： html css

本文链接：https://blog.csdn.net/m0_55832273/article/details/114970353

版权

小白基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.继承

定义：一些样式父给元素设置后，其后代元素也会继承父类的样式，这就叫做继承性。

后代元素只能继承来自祖先元素的文本样式。比如：color、text-开头的、font-开头的、line-开头的

例：

  <style>
    div {
      color: #F4A460;
      font-size: 48px;
    }
  </style>
</head>
<body>
<body>
  <div>
    <div>
        <p>这是一段文字</p>
      </div>    
  </div>

在这里插入图片描述

【注意】

关于盒子的属性（宽、高、padding、margin）、定位和布局的属性都不能被继承。
a标签的颜色与下划线不能通过继承改变，要直接作用在a标签本身。

2.层叠

如果一个标签被多个选择器选中，同时这多个选择器又为它设置了冲突的样式，那么我们需要计算这些选择器的权重，决定最终的显示样式。

计算权重

同一个样式写在不同的样式表中，权重大小为：

行内样式表>内嵌式+外链式（顺序,后面的样式会覆盖前面的样式。就近原则。）

同一个样式表不同的选择器，权重大小：

比较选择器的数量，先比较id选择器的数量，id选择器数量相同的话，再比较类选择器的数量，类选择器的数量相同的话，再比较标签选择器的数量。

对于相同的样式表，选择器的优先级为：id选择器>类选择器 >标签选择器。

【注意】

权重相同时，比较书写的顺序，后面的会覆盖前面的样式。
并集选择器的权重是分开的。
选择器未选中元素时，通过继承过来的的样式的权重是最低的。

总结：

1.如果样式存在不同的样式表，行内样式表的权重最高，再比较内嵌式与外链式的书写顺序。
2.同一样式表中，数基础选择器的数量。

id选择器数量多的权重。
id选择器相同，再看类选择器的数量，谁多谁的权重高。
类选择器的数量也相同，比较标签选择器的数量。
如果标签选择器的数量也相同，则比较书写顺序。
通配符的权重对选择器的权重要低，比继承过来的要高。

important

impor在英语中是“最重要”的意思。
加上这句话后，该样式的权重就会变成最高。

格式：

属性:属性值 ！important；
//注意important前必须加‘！’。

例1：

  <style>
    p {
      font-size: 32px;
      color: green;
    }
    p {
      font-size: 32px;
      color: red;
    }
  </style>
</head>
<body>
<body>
  <p>这是一段文字</p>

在加！important前，运行结果字体颜色是红色的，因为同等选择器，后面的会覆盖前面的样式。

例2：

  <style>
    p {
      font-size: 32px;
      color: green !important;
    }
    p {
      font-size: 32px;
      color: red;
    }
  </style>
</head>
<body>
<body>
  <p>这是一段文字</p>