css学习笔记 2022/4/17

最新推荐文章于 2024-07-25 16:45:46 发布

weixin_43904258

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量64

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/weixin_43904258/article/details/124230945

版权

六、css的继承性

6.1继承性

只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性叫做继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                xiang
            </li>
        </ul>
    </div>
</body>
</html>

css可以继承的属性都是有关文字的，例如color，font-size，font-family

6.2层叠性

css样式表又叫层叠式样式表，使用不同的选择器给同一个元素设置样式

  <style>
        p{
            color: aqua;
        }
        .par
        {
            font-size: 70px;
        }
        #par
        {
            /* 给文字加下划线 */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="par" id="par">文字</p>
</body>

通过上面的案例，可以发现一个标签可以被多个选择器选取并设置属性。

如果多个选择器设置了同一个属性，会有层叠现象。（其他效果消失，仅保留第一个的效果）

选择器的权重：id选择器>class类名选择器>标签选择器

如果被多个选择器同时选中，按上方顺序。

 <style>
        .box1 div.box2 #box3 p
        {
            color: blue;
        }
        #box1 #box2 div.box3 p
        {
            color:darkred ;font-size: 60px;
        }
        #box1 div.box2 .box3{
            color:chartreuse;
        }

    </style>
</head>
<body>
    <!-- <p class="par" id="par">文字</p> -->
    <div id="box1" class="box1">
        <div id="box2" class="box2">

        
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
    </div>
</body>

最后颜色显示为棕色（第二个）

带#（id选择器）【#box3】

带·（class选择器）【.box1 div.box1】

.box1 div.box2 #box3 p 一个id选择器两个class选择器两个标签选择器

#box1 #box2 div.box3 p 两个id选择器一个class选择器两个标签选择器

#box1 div.box2 .box3 一个id选择器两个class选择器一个标签选择器

方法是从id选择器开始比较如果id选择器能比较大小则选择含id选择器数量最大的；

如果id选择器数量相同的，则比较类名选择器，数量大的优先；如果类名选择器数量相同或没有，则标签选择器多的优先；如果所有选择器数量相同，则后写的覆盖先写的。

这里是都选择p；

如果都没有选择中对应标签，就看谁离得近。

    <style>
        #box1 #box2 {
            color: blue;
        }
        .box1 .box2 .box3
        {
            color: blueviolet;font-size: 60px
            ;
        }
    </style>

紫色

    <style>
        #box1 #box2 .box3{
            color: blue;
        }
        .box1 .box2 .box3
        {
            color: blueviolet;font-size: 60px
            ;
        }
    </style>

weixin_43904258

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记 2022/4/17

六、css的继承性6.1继承性只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性叫做继承性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
复制链接

扫一扫