CSS三大特性之层叠性~

从未止步..

已于 2023-02-26 18:50:20 修改

阅读量1.4k

点赞数 1

分类专栏： Javaweb基础~ 文章标签： css html 前端开发语言 css3

于 2022-12-02 14:31:30 首次发布

本文链接：https://blog.csdn.net/m0_64365419/article/details/128143828

版权

Javaweb基础~ 专栏收录该内容

14 篇文章 10 订阅

订阅专栏

CSS的三个特性：层叠性，继承性，优先级

层叠性：

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则---就近原则，那个样式离结构近，就执行那个样式
样式不冲突，不会层叠

举例：

<head>
    <style>
        div{
            color:aquamarine;
            font-size: 40px;
        }
        div{
            color:blue;
        }
    </style>
</head>
<body>
    <div>层叠样式</div>
</body>

显示如下：

color被覆盖而font-size并没有被覆盖

在这里插入图片描述

继承性：

CSS中的继承：子标签会继承父标签的某些样式，如文本的颜色和字号

举例：

<head>
    <style>
        div{
            color:aquamarine;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>我是div的子标签</p>
    </div>
</body>

显示如下：

在style中，我们并没有给p标签设置任何的属性，但由于它是div标签的子标签，所以他最终显示的效果是div的样式

在这里插入图片描述

通过我们之前所讲的调试工具，它也能告诉我们p的样式是继承与div标签

在这里插入图片描述

继承性的优点：

1：恰当的使用继承可以简化代码量，降低CSS样式的复杂性

2：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的属性都可以继承，以及color属性）

行高的继承性：

我们先来回忆一下综合设置字体样式的语法：

p{
	font:font-style font-weight font-size/line-height font-family;
}

通过之前的学习我们知道，行高的单位是px,但行高也可以不带单位，但是不带单位并不是直接把px去掉，而是改变一下表示方法

举例：

之前的写法：

div {
            color: blue;
            font: 15px/30px 宋体;
}

不带单位：

 div {
            color: blueviolet;
            font: 15px/2 宋体;//表示行高为当前文字大小的2倍，也就是30px
}

以上两种书写均正确！

如果子元素没有设置行高，则会继承父元素的行高

举例：

<head>
    <style>
        div {
            color: blueviolet;
            font: 15px/2 宋体;
        }
        p{
            color:aquamarine;
            font-size:20px;
        }

    </style>
</head>
<body>
    <div >我是div1中的文字
        <p>我是p标签</p>
    </div>
</body>

显示如下：

我们并没有给p标签指定行高，仅仅是指定了它的文字大小，那么它就会继承父元素div的行高，此时的行高大小为p标签文字的大小×2

在这里插入图片描述

而这样写的好处就在于我们能够通过子元素的文字大小自动调整它的行高

优先级：

当同一个元素指定多个选择器，就会有优先级的产生

选择器相同的情况下，则执行层叠性

就近原则！！

选择器不同，则根据选择器权重执行

在这里插入图片描述

上表中的选择器权重由上到下依次增大，选择器权重越大，优先级越高

举例：

<head>
    <style>
         .div1{
            color:aquamarine;
            font-size:20px;
        }
        div {
            color: blueviolet;
            font: 15px/2 宋体;
        }
    </style>
</head>
<body>
   <div class="div1">早上好</div>
</body>

显示如下：

在这里插入图片描述其它的都是一样的方法，大家可以自行写代码体会一下，这里我们重点说一下最后一个选择器的用法：

!important选择器:

在选择器中，它的权重是最大的，可以理解为它能够强制性的将某个权重较低选择器中的某个样式显示出来，只需要在该样式后面＋!important

举例：

<head>
    <style>
         .div1{
            color:aquamarin ;
            font-size:10px;
        }
        div {
            color: blueviolet !important;
            font-size:  50px;
        }
    </style>
</head>

<body>
   <div class="div1">早上好</div>
</body>

显示如下：
在这里插入图片描述

类选择器的权重大于标签选择器，所以此时应该显示的是类选择器中指定的样式，但由于在标签选择器的color属性后面，使用了！important，所以字体的颜色显示出来的是标签选择器中的样式，并非类选择器中的样式

但是需要注意的是，标签选择器中的font-size属性并没有通过！important强制指定，因此字体的大小还是类选择器中指定的大小，！important只能用来指定单个的属性

优先级----小tips：

1：权重是由4组数字组成，但是不会有进位
2：等级判断从左到右，如果某一位数值相同，则判断下一位
3：继承的权重是0，如果该元素没有被选中，不管父元素权重是多少，子元素得到的权重都是0

举例：

<head>
    <style>
       #div1{
        color:chartreuse;
       }
       p{
        color:darksalmon;
       }
    </style>
</head>
<body>
   <div id="div1">早上好
    <p>我是p标签</p>
   </div>
</body>

显示如下：

为什么p标签中的文字并没有像显示它的父类id选择器中的效果呢？

原因就是我们上述所说的，子元素继承的权重为0，即使父元素的权重很高，但是在子元素这里都是0，因此p标签中的文字显示的效果为元素选择器中的样式

在这里插入图片描述
关于优先级，还有一个特殊的标签-----a标签：

下述实例中，我们对body部分进行了样式的设置：

<head>
    <style>
       body{
        color:darkgreen;
       }
    </style>
</head>
<body>
   <div id="div1">早上好
    <p>我是p标签</p>
   </div>
   <a href="#">我是超链接</a>
</body>

显示如下：

在这里插入图片描述但是显示效果中a标签的文字依旧是绿色，查看style，我们也没有对a标签进行额外的样式设计呀

原因就是 a标签被浏览器默认的设置为蓝色的带下划线的样式，所以即使没有对它设置新的样式，他也不会继承body的样式

如果不想a标签显示浏览器默认的样式，那么我们可以通过元素选择器对其设置新的样式

举例：

<head>
    <style>
       body{
        color:darkgreen;
       }
       a{
        color:chocolate;
       }
    </style>
</head>
<body>
   <div id="div1">早上好
    <p>我是p标签</p>
   </div>
   <a href="#">我是超链接</a>
</body>

显示如下：

在这里插入图片描述

权重的叠加问题：

权重的叠加一般出现在复合选择器中，这里就需要涉及权重的计算问题

举例：

   <head>
        <style>
        /*ul li权重计算：0,0,0,1+0,0,0,1=0,0,0,2	2*/
           ul li{
            color:darkolivegreen;
           }
           /*li权重是：0,0,0,1	1*/
           li{
            color:brown;
           }
           /* .nav li 权重计算：0,0,1,0+0,0,0,1=0,0,1,1	 11*/
           .nav li{
            color:aquamarine;
           }
        </style>
    </head>
    <body>
       <ul class="nav">
        <li>早上好</li>
        <li>中午好</li>
        <li>晚上好</li>
       </ul>
    </body>

取权重最大的值的样式进行显示

显示如下：

在这里插入图片描述

注意：权重在叠加的过程中，不要进位

上述我们所举的例子涉及的选择器个数较少，但是当选择器的个数比较大时，就会出现叠加之后，最后一位变成了10，正确写法即为：0,0,0,10请记住，无论变成几十还是几百，第四位的数值都不能向上进一位，因为权重本身就是由4位构成的，我们不能加着加着把标签选择器变成了类选择器，这是不对的

从未止步..

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS三大特性之层叠性~

类选择器的权重大于标签选择器，所以此时应该显示的是类选择器中指定的样式，但由于在标签选择器的color属性后面，使用了！important，所以字体的颜色显示出来的是标签选择器中的样式，并非类选择器中的样式。原因就是我们上述所说的，子元素继承的权重为0，即使父元素的权重很高，但是在子元素这里都是0，因此p标签中的文字显示的效果为元素选择器中的样式。在style中，我们并没有给p标签设置任何的属性，但由于它是div标签的子标签，所以他最终显示的效果是div的样式。/*li权重是：0,0,0,1 1*/
复制链接

扫一扫