CSS学习笔记3-CSS三大特性

最新推荐文章于 2024-03-02 17:15:20 发布

weeds606

最新推荐文章于 2024-03-02 17:15:20 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100011547

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、什么是CSS的三大特性

CSS的三大特性包括继承性、层叠性、优先级

二、继承性

给父元素设置属性后，后代元素也可以使用该属性。注意：不是所有属性都可以继承，只有以font-、color、size-、line开头的属性才能被继承。

如下所示，在CSS中将div标签的文本颜色设置为红色，div标签的后代标签的文本颜色都为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性练习</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
    <ul>
        <li>
            <p>我是列表中的段落</p>
        </li>
    </ul>
</div>
</body>
</html>

二、层叠性

多个选择器同时选择同一个元素时，CSS处理冲突的能力

如下所示，设置p标签的元素颜色为红色，设置包含class属性的元素颜色为蓝色，此时CSS处理冲突的能力

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性</title>
    <style>
        p{
            color: red;
        }
        [class]{
            color: blue;
        }
    </style>
</head>
<body>
<p class="account">我是段落</p>
</body>
</html>

三、优先级

1.什么是优先级

当多个选择器同事选择一个元素时，以哪个选择器为准，此时由优先级决定

2.判断优先级的三种方式

间接选中（继承）：哪个离标签近，以哪个为准

相同选择器（直接选中）：以后面的选择器为准

不同选择器（直接选中）：优先级顺序id>class>标签>通配符>继承>浏览器默认

3.!important

选择器的哪个属性添加了!important，该属性的优先级会提到最高。该选择器的其他属性不会变化

如下代码：

使用p标签选择器、class属性选择器同时选择中p标签。由于class属性选择器优先级大于标签选择器，所以应该以class属性选择器的样式为准。但是标签选择器中的color属性设置了!important，所以字体颜色为红色，字体大小为50px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        p{
            color: red !important;
            font-size: 20px;
        }
        [class]{
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p class="account">我是段落</p>
</body>
</html>

4.如果多个复杂选择器同时选中一个元素，此时需要使用优先级权重判断优先级。优先级权重计算方式

id数不同时，以id数多的为准

id数相同时，以class数多的为准

class数也相同时，以标签多的为准

id、class、标签数都相同时，以后面的为准

下面这段代码中，两个选择器的id、class、标签数都是一样的，以第二个选择器为准，所以元素的颜色为黄色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级权重</title>
    <style>
        p#account.block{
            color: red;
        }
        p#account.man{
            color: yellow;
        }
    </style>
</head>
<body>
<p id="account" class="block man">我是一颗绿萝</p>
</body>
</html>

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记3-CSS三大特性

一、什么是CSS的三大特性CSS的三大特性包括继承性、层叠性、优先级二、继承性给父元素设置属性后，后代元素也可以使用该属性。注意：不是所有属性都可以继承，只有以font-、color、size-、line开头的属性才能被继承。如下所示，在CSS中将div标签的文本颜色设置为红色，div标签的后代标签的文本颜色都为红色<!DOCTYPE html><html...
复制链接

扫一扫