CSS继承和层叠性

最新推荐文章于 2024-02-02 20:11:12 发布

qq_37149421

最新推荐文章于 2024-02-02 20:11:12 发布

阅读量249

点赞数 1

本文链接：https://blog.csdn.net/qq_37149421/article/details/78437674

版权

一、选择器(4+3+3+*)

(1)4个基本选择器：通用选择器，id选择器，class选择器(类就是被重用的,一个标签可以有多个类,一个类可以用在多个标签上，挂类法编写样式)，标签选择器。

(2)3套复杂选择器：后代选择器(空格表示后代,多层选择，不固定层次)，交集选择器(不用任何字符隔开,后面的选择器一般是class或者id)，并集选择器(逗号表示并集)。

(3)3个非常用选择器：子元素选择器(E>F)，直接相邻选择器(E+F，+号表示紧邻

当前选中元素后紧跟的后续一个元素)，普通相邻选择器(E~F，~兄弟后续元素

当前选中元素后的所有符合F选择器的元素)。

(4)伪类选择器：

•超链接选择：:link、:visited、:hover、:active

•第一个子元素：E:first-child

伪对象/伪元素：

•文字选择：E::first-letter、E::first-line

•插入内容：E::before、E::after

(5)群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，如：

p, td, li {

line-height:20px;

color:#c00;

}

(6)属性选择器：根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性，如：

[title] {margin-left: 10px}

注意事项：由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序，如：

a:visited {color: #00FF00;text-decoration: none}

　　 a:hover {color: #FF00FF;text-decoration: underline}

采用这样的书写顺序，无论链接有没有被访问过，只要当鼠标移到链接上，链接都会变成蓝色并有下划线。但是，如果采用下面的书写顺序：

a:hover {color: #FF00FF;text-decoration: underline}

a:visited {color: #00FF00;text-decoration: none}

如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。

二、CSS继承性

(1)定义：有些样式属性，在给指定标签设置的时候，同时也给后代设置了，此性质就是继承性,指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

(2)条件：继承到样式的标签和定义样式的标签必须是从属关系（后代标签关系）对文本样式设置的基本属性才能被继承（颜色color\样式text\字体font\行属性line）

所有关于对于盒子模型（div、span等）的属性设置（border、定位、布局）都不能被继承

如：

<!DOCTYPEhtml>

<html>

<headlang="en">

<style>

div {

color: red;

}

</style>

</head>

<body>

<div>

<p>这是第一段文字</p>

<p>这是第二段文字</p>

<span>这是第三段文字</span>

</div>

</body>

</html>

显示效果：

测试文本

三、层叠性：指的是样式的优先级，当产生冲突时以优先级高的为准

(1)如何判断选择器的层叠效果：

①通过权值判断法;

②通过每一个选择其中的id选择、类选择、标签选择数量来计做权值（ICE）;

③先比较id权值，再次比较类、最后比较标签;

④全部一样比较顺序

数权值前提是一定要保证每一条选择器必须要选中的指定元素

(2)权值判定注意点：

①看是否所有的选择器都选中了指定标签，如果全部选中就数权值

②如果没有选中，则遵循就近原则

③都选中同一级别，则看个体元素的权值

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        .div1 .div2 .div3 { //没选中
            color: red;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">
            <div class="div3">
                <p>测试文本</p>
            </div>
        </div>
    </div>
</body>
</html>

显示效果：

important标记，优先级最高

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <metacharset="utf-8">
    <styletype="text/css">
        p{
            color: red!important;
            /*important 只能作用在属性值中！
              且对于继承无用不影响就近原则*/
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <pclass="p1">测试文本</p>
</body>
</html>

显示效果：

四、小结：

qq_37149421

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS继承和层叠性

一、选择器(4+3+3+*)(1)4个基本选择器：通用选择器，id选择器，class选择器(类就是被重用的,一个标签可以有多个类,一个类可以用在多个标签上，挂类法编写样式)，标签选择器。(2)3套复杂选择器：后代选择器(空格表示后代,多层选择，不固定层次)，交集选择器(不用任何字符隔开,后面的选择器一般是class或者id)，并集选择器(逗号表示并集)。(3)3个非常用选择器：子元素选
复制链接

扫一扫