CSS(2)_<div id="box1" class="c1"> <div id="box2" class="c-CSDN博客

本文链接：https://blog.csdn.net/2303_79590957/article/details/134766449

各类选择器

1.后代选择器；2.子代选择器；3.并集选择器；4.伪类选择器；

目的是更精确的选中标签

后代选择器：

在标签与标签（或其他选中方式）之间用空格隔开，例如：div span {}，意为被div标签包裹的所有span标签，见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div span {
            color: green;
            text-indent: 2em;
            font-size: 32px;
            line-height: 2;
            font-weight: 700;
            font-family: 楷体;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <span>div->span标签</span>
        <p><span>div->p->span标签</span></p>
    </div>
    <span>span标签</span>
</body>
</html>

在以上代码中，前两个span标签被CSS修饰，而第3个span标签未被修饰

子代选择器：

顾名思义，子代选择器只能选中儿子，而不能选中孙子，例如：div>span{}，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div > span {
        color: red;
    }
</style>
<body>
    <div>
        <span>div->span标签</span>
        <p><span>div->p->span标签</span></p>
    </div>
</body>
</html>

在以上代码中，只有第一个span标签变红，第二个没有

并集选择器：

和数学里的并集一样，可以同时选中多个标签集合（或多个单标签），见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        div,
        ul {color: red;font-size: 60px;}
        /* 子代标签会继承父级标签的一些属性 */
    </style>
</head>
<body>
    <p>p标签</p>
    <div>div标签</div>
    <ul> 
        <li>li1标签</li>
        <li>li2标签</li>
    </ul>
</body>
</html>

代码中的文字都被CSS修饰，至于为什么选中ul，但是li中的内容也被修饰，就与后文的CSS的继承性有关了

伪类选择器：

虽然我也不知道伪类选择器是个什么，但确实有几个专门针对a标签选择器，且不属于以上选择器：link 访问前，visited 访问后，hover 鼠标悬停，active 点击时（长按观察）；

使用方式：a:link{} 等，见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {font-family: 楷书;font-size: 32px;font-weight: 700;}
        a:link {color: aqua;}
        a:visited {color: black;}
        a:hover {color: red;}
        a:active {color: aliceblue;}
    </style>
</head>
<body>
    <!-- link 访问前，visited 访问后，hover 鼠标悬停，active 点击时（长按观察） -->
    <h1>如果要给超链接设置以上4种状态，需按LV好（HA）的顺序书写，，，与CSS的层叠性有关</h1>
    <a href="https://www.miyoushe.com/ys/" target="_blank">米游社</a>
</body>
</html>

CSS三大特性

1.CSS的继承性；2.CSS的层叠性；3.CSS的优先级

CSS的继承性：

CSS的继承性，即子代会继承父级的属性，专门用于制作网页前的清除默认样式，

见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {font-size: 32px;font-weight: 700;color: blue;}
        a:hover {color: red;}
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <a href="#">a</a>
</body>
</html>

通过对body标签的CSS修饰，且CSS中没有其他更高级的选择器，因此所有属于body标签的标签都拥有了font-size: 32px;font-weight: 700;color: blue;

CSS的层叠性：

同等级的选择器会被更后出现的同属性会覆盖前属性，直观见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {color: red;font-weight: 700;}
        div {color:green;font-size: 32px;}
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

div标签最后呈现为绿色

CSS的优先级：

优先级也叫权重，当一个标签使用了多个选择器时，基于不同选择器的匹配规则

规则：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

即：标签选中范围越大，优先级越低；其中 !important 是提权功能，将优先级提到最高，慎用

优先级的叠加计算原则：行内样式，id选择器个数，类选择器个数，标签选择器个数

从左向右依次数个数，同一级个数多的优先级高，如果个数相同，则向后比较（每一级之间不存在进位）

接下来有三个例子帮助大家熟悉CSS的优先级：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* (0,0,2,1) */
        .c1 .c2 div {color: blue;}
        /* (0,1,0,1) */
        div #box3 {color: green;}
        /* (0,1,1,0) */
        #box1 .c3 {color: orange;}
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本什么颜色？
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* (0,0,0,2) */
        div p {color: red;}
        /* (0,0,1,0) ,,但是它是继承*/
        .father {color: blue;}
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            文字
        </p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* (0,0,0,2) */
        div p {color: red;}
        /* (0,0,1,0) ,,但是它是继承*/
        .father {color: blue;}
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            文字
        </p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* (0,2,0,0) */
        #father #son {color: blue;}
        /* (0,1,1,1,) */
        #father p.c2 {color: black;}
        /* (0,0,2,2,) */
        div.c1 p.c2 {color: red;}
        /* 继承 */
        #father {color: green !important;}
        /* 继承 */
        div#father.c1 {color: yellow;}
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            这行文本是什么颜色的？
        </p>
    </div>
</body>
</html>

ok，今天就分享到这里，下次见