CSS选择器

最新推荐文章于 2025-03-27 11:04:28 发布

christinnadong

最新推荐文章于 2025-03-27 11:04:28 发布

阅读量1k

点赞数 15

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/christinnadong/article/details/144178267

版权

选择器的作用就是查找标签，通过选择器可以找到对应的标签

标签选择器：标签名

标签名 {css属性名: 属性值;}

通过标签名，找到页面中所有这类标签，设置样式

标签选择器，选择的是一类标签，而不是单独某一个标签
标签选择器，无论嵌套关系有多深，都能找到对应的标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 标签选择器 */
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div中的p标签</p>
    </div>
</body>

</html>

类选择器：.类名

.类名 {css样式}

通过类名，找到页面中所有带这个类名的标签，设置样式

所有标签上都有class属性，class属性的属性值称为类名
类名可以由数字、字母、下划线、中划线组成，其中不能数字、中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>x选择器</title>
    <style>
        /* 定义类选择器 */
        .red {
            color: red;
        }
        /* 定义类选择器 */
        .size {
            font-size: 22px;
        }
    </style>
</head>
<body>
    <p>普通段落文本</p>
    <!-- 指定了颜色的样式 -->
    <p class="red">指定了颜色的样式</p>
    <!-- 同时指定两个类，两个类之间用空格隔开 -->
    <p class="red size">同时指定两个类，两个类之间用空格隔开</p>
</body>
</html>

id选择器：#id名

#id属性值 {css样式}

通过 id 属性值，找到页面中带有这个 id 属性值的标签，设置样式

所有标签上都有 id 属性
id 属性值类似于身份证号码，在一个页面中是唯一的，不可重复（程序员自己保证）
一个标签上只能有一个 id 属性
一个 id 选择器只能选中一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>x选择器</title>
    <style>
        /* id选择器 */
        #red {
            color: red;
        }
        /* id选择器 */
        #size {
            font-size: 22px;
        }
    </style>
</head>
<body>
    <p>普通文本</p>
    <!-- 因为id选择器是唯一的，可以找到唯一的标签，所以也不需要一个标签同时需要多个id选择器 -->
     <!-- id选择器，一般也不是用来查找标签的 -->
    <p id="red">通过id指定了选择器</p>
    <p id="size">通过id指定了选择器</p>
    <p></p>
</body>
</html>

通配符选择器：*

* {css样式}

找到页面中所有的标签，设置样式

可以用来去除标签默认样式（padding、margin）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>x选择器</title>
    <style>
        /* 通配符选择器 */
        * {
            color: red;
        }
    </style>
</head>

<body>
    <p>这是p标签</p>
    <div>这是div标签</div>
</body>

</html>

后代选择：空格

作用：根据HTML标签的嵌套情况，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果：
- 在选择器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>
        /* 父选择器 后代选择器 {} */
        .father p {
            color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <p>这是p标签（儿子）</p>
        <div>
            <p>这是p标签（孙子）</p>
        </div>
    </div>
    <!-- 没在div中的p标签不会被选中 -->
    <p>这是一个p标签</p>
</body>

</html>

子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 {css}
结果
- 在选择器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>
        /* 子代选择器：只有儿子会被选中 */
        .father>p {
            color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <p>这是p标签（儿子）</p>
        <div>
            <p>这是p标签（孙子）</p>
        </div>
    </div>
    <!-- 没在div中的p标签 -->
    <p>这是一个p标签</p>
</body>

</html>

并集选择器：，

作用：同时选择多组标签，设置相同样式
选择器语法：选择器1, 选择器2 {css}
结果
- 找到选择器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,
        div,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
</body>

</html>

交集选择器：连写（标签选择器需在最前面）

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2 {css}
结果
- （既又原则）找到页面中既能被选择器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的标签 */
        p.box {
            color: red;
        }
    </style>
</head>

<body>
    <p class="box">p+box</p>
    <p>ppp</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标签，鼠标悬停时的颜色 */
        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <a href="#">超链接</a>
</body>

</html>

结构伪类选择器：child

作用：根据元素在 HTML 中的结构关系查找元素
优势：减少对于 HTML 中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
通常用来查找的父元素中只包含同一种子元素的标签（如：ul 嵌套 li 标签）

选择器	说明
E:first-child { }	匹配父元素中第一个子元素，并且是E元素
E:last-child { }	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){ }	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) { }	匹配父元素中的倒数第n个子元素，并且是E元素

结构伪类中 nth 的公式应用

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

<!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标签 */
        li:first-child {
            background-color: pink;
        }
        /* 选中最后一个li标签 */
        li:last-child {
            background-color: skyblue;
        }
        /* 选中第3个标签 */
        li:nth-child(3) {
            background-color: orange;
        }
        /* 选中倒数第3个标签 */
        li:nth-last-child(3) {
            background-color: yellow;
        }

        /* 设置偶数的字体式楷体 */
        li:nth-child(2n) {
            font-family: 楷体;
        }
        /* 设置奇数的字体是宋体 */
        li:nth-child(2n+1) {
            font-family: 宋体;
        }
        /* 设置前5个的字号是20px */
        li:nth-child(-n+5) {
            font-size: 20px;
        }
        /* 设置从第6个到最后，字号是22px */
        li:nth-child(n+6) {
            font-size: 22px;
        }
    </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>
        <li>这是第9个li标签</li>
        <li>这是第10个li标签</li>
    </ul>
</body>
</html>

伪元素选择器：before、after

伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签
种类

伪元素	作用
::before	在当前元素的所有子元素前面添加一个伪元素
::after	在当前元素的所有子元素后面添加一个伪元素

注意点：
- 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>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        div::before {
            content: "老鼠";

            /* 宽高都不生效，是行内元素 */
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        div::after {
            content: "大米";
        }
    </style>
</head>
<body>
    <div>爱</div>
</body>
</html>