1. CSS的复合选择器

ybi8bo007

于 2023-06-08 18:10:48 发布

阅读量109

点赞数

分类专栏：前端——CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_74891783/article/details/131113256

版权

前端——CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1.1什么是复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
●复合选择器可以更准确、更高效的选择目标元素(标签)
●复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
●常用的复合选择器包括 :后代选择器、子选择器、并集选择器、伪类选择器等等

1.2后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法:

ul  li  { 样式声明 }   /*选择ul里面所有的li标签元素*/

注意：
●元素1和元素2中间用空格隔开
●元素1是父级，元素2是子级，最终选择的是元素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>
        /*1. 把ol里面的小li选出来改为red */
        ol li {
            color: red;
        }
        /*2. 把ol里的小li里的a选出来改为greenyellow */
        /* ul里的小li里的a不会改变 */
        ol li a {
            color: greenyellow;
        }
        /* 3. 当出现两个ul时，我们想把其中一个ul里的a改
            为pink，可以使用类选择器*/
        .pink li a {
            color: pink;
        }
    </style>
</head>
<body>
    <ol>
        <li>ol的孩子</li>
        <li>ol的孩子</li>
        <li><a href="#">ol的孙子</a></li>
    </ol>
    <ul>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
        <li><a href="#">ul的孙子</a></li>
    </ul>
    <ul class="pink">
        <li>ul的孩子</li>
        <li>ul的孩子</li>
        <li><a href="#">ul的孙子</a></li>
        <li><a href="#">ul的孙子</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

1.3子选择器(重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法:

元素1>元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代(子元素)元素2
例如:

div> p {样式声明}  /*选择div里面所有最近一级p标签元素*/

●元素1和元素2中间用大于号隔开
●元素1是父级，元素2是子级，最终选择的是元素2
●元素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>
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div>
</body>
</html>

在这里插入图片描述

例题：
1.将下面的链接文字修改为红色

< div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>

写法：（后代选择器）

.nav ul li a{  //li可写可不写
color: red;
}

2.将下面的大肘子文字修改为红色

<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>

写法：（子选择器）

. hot>a {
color: red;
}

1.4并集选择器(重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法:

元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2
例如:

ul,div { 样式声明 }  /* 选择ul和div标签元素*/

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

        /* 要求2：把熊大熊二改为粉色 还有 小猪一家改为粉色 */
        .pig li,  /* 用 .pig 或ul li 或ul 都可  */
        div,
        p {
            color: pink;
        }
    </style>
    <!-- 语法规范：并集选择器通常竖着写 -->
</head>

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

</html>

在这里插入图片描述

1.5伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover、:first-child 。
伪类选择器很多，比如有链接伪类、结构伪类等，这里先介绍常用的链接伪类选择器。

1.6链接伪类选择器

语法：

a:link
/*选择所有 未被访问的链接*/
a: visited
/*选择所有 已被访问的链接*/
a: hover
/*选择鼠标指针位于其上的链接*/
a: active
/*选择活动链接(鼠标按下未弹起的链接) */

例：

<!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.未访问的链接 a:link 把没有点击过(访问过)的链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2. a:visited 选择点击过的（访问过的）链接*/
        a:visited {
            color: orange;
        }

        /* 3. a:hover  选择鼠标经过的那个链接*/
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

一、链接伪类选择器注意事项：
1.为了确保生效,请按照LVHA的顺序声明 :link 、:visited、:hover 、:active.
2.记忆法: Iv包包hao
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
二、链接伪类选择器在实际工作开发中（最常用）的写法

/*a是标签选择器  所有的链接*/
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过*/
a: hover {
color: red;   /*鼠标经过的时候，由原来的灰色变成了红色*/
}

如：

<!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 {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">黑暗荣耀</a>
</body>

</html>

1.7 :focus伪类选择器

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

input:focus {
background- color: yellow;
}

如：

<!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表单元素选出来 */
        input:focus {
            background-color: pink;
        }
    </style>
</head>

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

</html>

此时将光标放在第三个格里，可以看到：

在这里插入图片描述

1.8 复合选择器

在这里插入图片描述

ybi8bo007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. CSS的复合选择器

CSS—复合选择器
复制链接

扫一扫

专栏目录