CSS进阶选择器

桐叶~

已于 2023-11-24 20:53:47 修改

阅读量33

点赞数

分类专栏： # CSS3 文章标签： css 前端

于 2023-11-24 18:18:58 首次发布

本文链接：https://blog.csdn.net/m0_57851747/article/details/134604392

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS进阶选择器

一.复合选择器
- 1.后代选择器
- 2.子代选择器
二.并集选择器
三.交集选择器
四.hover伪类选择器
五.结构伪类选择器
六.伪元素选择器

一.复合选择器

1.后代选择器

作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法: 选择器1 选择器2{ css}
结果:在选择器1所找到标签的后代 (儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式
注意点

1.后代包括:儿子、孙子、重孙子…
2.后代选择器中，选择器与选择器之前通过空格隔开
示例：

<!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标签中p标签内容变红 */
        /* 父选择器 后代选择器      选中的是后代（儿子，孙子，重孙子......）*/
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>111111111</p>
    <div>
        <p>2222222222</p>
    </div>
</body>
</html>

2.子代选择器

作用:根据HTML标签的嵌套关系，选择父元素子代中满条件的素选择器
语法:选择器1 > 选择器2{ css }
结果：在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式
注意点:

1.子代只包括:儿子
2.子代选择器中，选择器与选择器之前通过 >隔开
示例：

<!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的儿子a变色 */
        div>a {
            color: aqua;
        }


    </style>
</head>
<body>
    <div>
        <a href="#">1111111</a>
        <p><a href="#">222222222</a></p>
    </div>
</body>
</html>

二.并集选择器

作用:同时选择多组标签，设置相同的样式选择器
语法:选择器1,选择器2{ css }
结果:找到选择器1和选择器2 选中的标签，设置样式
注意点:

1.并集选择器中的每组选择器之间通过，分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

示例：

<!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,
        h1,
        span {
            color: aqua;
        }

    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
    <h2>h2</h2>
</body>
</html>

三.交集选择器

作用:选中页面中同时满足多个选择器的标签选择器
语法:选择器1选择器2{ css}
结果:找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点:

1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面
示例：

<!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.box {
            color: skyblue;
        }

    </style>
</head>
<body>
    <p class="box">p:box</p>
    <p>p</p>
    <div class="box">div:box</div>
</body>
</html>

四.hover伪类选择器

作用:选中鼠标悬停在元素上的状态，设置样式选择器
语法: 选择器:hover{ 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>
        /* 鼠标悬停时会出现设置效果 */
        a:hover {
            color: cornflowerblue;
            background-color: skyblue;
        }
        div>p:hover {
            color: cornflowerblue;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
    <div><p>111</p></div>
    <!-- 每个标签都可以添加伪类，每个标签都可以鼠标悬停 -->
</body>
</html>

五.结构伪类选择器

1.作用:根据元素在HTML中的结构关系查找元素
2.优势:减少对于HTML中类的依赖，有利于保持代码整洁
3.场景:常用于查找某父级选择器中的子元素
在这里插入图片描述
示例：

<!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:first-child{
            color: skyblue;
         }
         /* 第二个 */
         li:last-child{
            color: pink;
         }
         /* 第三个 */
         li:nth-child(3){
            color: green;
         }
         /* 倒数第二个 */
         li:nth-last-child(2){
            color: bisque;
         }
         /* 偶数，常用 */
         li:nth-child(2n){
            color: blueviolet;
         }
         /* 奇数，常用 */
         li:nth-child(2n+1){
            color: cadetblue;
         }
         /* 前五个*/
         li:nth-child(-n+5){
            color: antiquewhite;
         }
         /* 从第五个开始 */
         li:nth-child(n+5){
            color: blue;
         }
         /* 四的倍数 */
         li:nth-child(4n){
            color: chocolate; 
         }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

六.伪元素选择器

伪元素:一般页面中的非主体内容可以使用伪元素
区别:
1.元素:HTML设置的标签
2.伪元素:由CSS 模拟出的标签效果
种类：
在这里插入图片描述
注意点:
1.必须设置content属性才能生效
2.伪元素默认是行内元素

<!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>
        .father::before{
            /* 内容，content属性必须添加，否则伪元素不生效 */
            content: '哇';
            color: skyblue;
            width: 111px;
            height: 111px;
            background-color: blanchedalmond;
            /* 默认行内元素，宽高不生效 */
            display: inline-block;

        }
    </style>
</head>
<body>
    <div class="father">哇</div>
</body>
</html>