认识CSS之复合选择器

最新推荐文章于 2024-04-06 19:41:17 发布

诺坎普的风间

最新推荐文章于 2024-04-06 19:41:17 发布

阅读量968

点赞数 2

分类专栏：前端只因变凤凰之路文章标签： css 前端 javascript css复合选择器复合选择器 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129419638

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的复合选择器。知识学习内容来自b站的 @黑马程序员的视频

😃1 什么是复合选择器

在CSS中，可以把选择器分为基础选择器和复合选择器，而复合选择器又是由基础选择器进行组合形成的。通常是由两个或者多个基础选择器通过不同的方式组合而成的。

作用：更精准、高效的选择目标元素（即标签）

😃2 复合选择器的类别

常用的复合选择器包括：后代选择器、子选择器、并集选择器和伪类选择器。

🚩2.1 后代选择器（重要）

含义：后代选择器也叫包含选择器，可以选择父元素里面的子元素。写法就是父标签在前，中间用空格隔开，然后后面接一个子标签。子标签就叫做父标签的后代

注意：如果要对多个同样父元素中的一个父元素的子标签进行设置，可以对这个父元素单独设置一个类

语法：
元素1 元素2 {样式声明}

<!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>
        /* 选出ol中的li */
        ol li {
            color: pink;
        }

        ol li a {
            color: rgb(12, 10, 7);
        }

        /* 对多个同样父元素中的一个父元素的子标签进行设置 */
        .nav li a {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li><a href="#">我恁爹</a></li>
    </ol>
    <ul class="nav">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li><a href="#">我恁爹</a></li>
    </ul>
</body>

</html>

🚩2.2 子选择器（重要）

含义：子元素选择器只能选择作为某元素的最近一级子元素；并且中间用 > 分割，而不是空格。

注意：是最近的一级

语法：
元素1 > 元素2 {样式声明}

<!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>
        .nav>a {
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

🚩2.3 并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。就是逻辑和，并且任何选择器都可以作为并集选择器的一部分（即后代选择器也可以作为一部分）。

语法：
元素1,
元素2 ,
元素3 {样式声明}

<!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>
        /* 要求1 把熊大熊二改为粉色 */
        div,
        p {
            color: pink;
        }

        div,
        p,
        .pig li {
            color: pink;
        }

        /* 要求2 把熊大熊二和小猪一家改为粉色 */
    </style>
</head>

<body>
    <div>"熊大"</div>
    <p>"熊二"</p>
    <span>光头前</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

🚩2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个和第n个元素。书写的最大特点是用冒号:表示

伪类选择器有很多，比如链接伪类，结构伪类等

语法：
元素1 元素2 {样式声明}

👉2.4.1 链接伪类选择器

注意

注意书写顺序，link，visited，hover，active（LVHA）

a链接必须单独指定样式

适用场景

一般就是指定一个没有点击时的颜色，然后再指定一个鼠标放上去时的颜色就可以。即link和hover

a:link 选择所有未被访问过的链接
a:visited 选择所有已被访问过的链接
a:hover 选择鼠标指到的链接
a:activate 选择鼠标按下未弹起的标签

<!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>
        /* 未访问的标签 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 访问过的链接 */
        a:visited {
            color: blue;
        }

        /* 鼠标指到的链接 */
        a:hover {
            color: rgb(184, 77, 27);
        }

        /* 鼠标按下还没弹起 */
        a:active {
            color: bisque;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="www.baidu.com">未知网站</a>
</body>

</html>

👉2.4.2 focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说。

效果图

代码

<!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>
        input:focus {
            color: rgb(0, 0, 0);
            background-color: rgb(16, 151, 88);
        }
    </style>
</head>

<body>
    <input type="text"><input type="text"><input type="text">
</body>

</html>

💥3 复合选择器总结

选择器	作用	特征	使用情况	隔开符号和用法
后代选择器	选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近的一级元素	只选亲儿子	较少	符号是大于号 .nav>p
并集选择器	选择某些需要相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	选择不同状态的链接	与链接相关	较多	重点记住一般情况和:hover
:focus选择器	选择获得光标的表单	与表单相关	较少	input:focus

诺坎普的风间

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
认识CSS之复合选择器

在CSS中，可以把选择器分为基础选择器和复合选择器，而复合选择器又是由基础选择器进行组合形成的。通常是由两个或者多个基础选择器通过不同的方式组合而成的。作用：更精准、高效的选择目标元素（即标签）😃选择器作用特征使用情况隔开符号和用法后代选择器选择后代元素可以是子孙后代较多符号是空格.nav a子代选择器选择最近的一级元素只选亲儿子较少符号是大于号.nav>p并集选择器选择某些需要相同样式的元素可以用于集体声明较多符号是逗号链接伪类选择器。
复制链接

扫一扫