【前端寻宝之路】学习和使用CSS的所有选择器

用户10920432

发布于 2024-03-13 09:00:41

860

发布于 2024-03-13 09:00:41

文章被收录于专栏：Python数据结构与算法

参考链接:CSS选择器参考手册

如果标签一样,但我只想修改其中一个标签的内容格式,此时我们就需要用到:类选择器.

`基础选择器`

`类选择器`

.eat{
    color:red;
}

.sleep{
    color:green;
}

.game{
    color:blue;
}

.play{
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过link引入css文件 -->
    <link rel="stylesheet" href="./demo03.css">
</head>
<body>
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="play game">打豆豆</p>
</body>
</html>

⚠️我们可以通过类选择器进行对应标签的内容格式的修改,如果是多种样式修改叠加,可以在类选择器里面设置多个变量,然后再通过CSS进行对应格式的设置.

`id选择器`

CSS中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的,不能被多个标签使用(是和类选择器最大的区别)

#fe{
    font-size: 90px;
}

#sever{
    color:aquamarine;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo04.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="sever">后端开发</p>
</body>
</html>

`通配符选择器`

使用 * 的定义,选取所有的标签.

* {
    color: red ;
}

页面所有的内容都会被改成红色.
不需要被页面结构调用.

通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距

#fe{
    font-size: 90px;
}

#sever{
    color:aquamarine;
}

*{
    background-color: beige;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo04.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="sever">后端开发</p>
</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>
        ol li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
</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>
        .hobby li {
            color: red;
        }
    </style>

</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
</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>
        li a {
            color: aqua;
        }
    </style>

</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
        <li class="red">
            <a href="#">吃饭</a>
        </li>
    </ol>
</body>
</html>

`伪类选择器`

伪类选择器:用来定义元素状态

`链接伪类选择器`

a:link 选择未被访问过的链接 a:visited 选择已被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下但未弹起)

现在我们要使用伪类选择器来实现: 默认时刻超链接展示黑色当鼠标悬停到上面时,此时展示红色按下鼠标时展示绿色

<!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 {
            color:black
        }
        a:hover {
            color:crimson
        }
        a:active {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/Aileenvov?spm=1011.2415.3001.5343">Aileen</a>
</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>


        /* 设置按钮的样式 */
        input {
            color: crimson;
        }
        input:hover {
            color: blue;
        }
        input:active {
            color: cornsilk;
        }

    </style>
</head>
<body>
    <input type="button" value="按钮">
</body>
</html>