CSS选择器

WFIT~SKY

于 2024-10-05 20:34:11 发布

阅读量419

点赞数 9

分类专栏： Web前端文章标签：前端 CSS CSS3 CSS选择器

本文链接：https://blog.csdn.net/lv_soso/article/details/142718521

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. CSS基本选择器

作用：查找标签，设置样式。

1.1 标签选择器

作用：使用标签名作为选择器，选中同名标签设置相同的样式。

缺点：无法差异化标签效果。

<html>
    <head>
    <title>标签选择器</title>
    <style>
        p {
            color:red;
        }
    </style>
    </head>
    <body>
        <div>
            <p>标签内容</p>
        </div>
    </body>
</html>

1.2 类选择器

作用：查找标签，差异化设置标签显示效果。

步骤：定义类选择器（. 类名），使用类选择器（标签添加class = "类名"）。

注意:

类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
开发习惯：类名见名知意，多个单词可以用-连接（例如：news-hd）

<html>
    <head>
    <title>类选择器</title>
    <style>
        /* 定义类选择器 */
        .red {
            color: red;
        }
    </style>
    </head>
    <body>
<!-- 使用类选择器 -->
        <div class="red">这是div内容</div>
    </body>
</html>

1.3 id选择器

作用：查找标签，差异化设置标签显示效果。

场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式。

步骤：定义id选择器（#id名），使用id选择器（标签添加id= "id名"）。

规则：同一个id选择器在一个页面只能使用一次。

<html>
    <head>
    <title>id选择器</title>
    <style>
        /* 定义id选择器 */
        #red {
            color: red;
        }
    </style>
    </head>
    <body>
<!-- 使用id选择器 -->
        <div id="red">这是div内容</div>
    </body>
</html>

1.4 通配符选择器

作用:查找页面所有标签，设置相同样式。

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

<style>
    * {
       color: red;
    }
</style>

可以使用通配符选择器，清除默认样式，例如清除默认边框。

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

2. CSS复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

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

2.1 后代选择器

选中某元素的后代元素（所有符合的后代都可以）。

写法：父选择器子选择器 { CSS属性 } ，父子选择器之间用空格隔开。

<html>
    <head>
    <title>后代选择器</title>
    <style>
        div span {
            color:red;
        }
    </style>
    </head>
    <body>
        <div>
            <span>生效标签1</span>
            <p>
                <span>生效标签2</span>
            </p>
        </div>
    </body>
</html>

2.2 子代选择器

选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器{CSS属性}，父子选择器之间用>隔开。

<html>
    <head>
    <title>子代选择器</title>
    <style>
        div > span {
            color:red;
        }
    </style>
    </head>
    <body>
        <div>
            <span>生效标签</span>
            <p>
                <span>不生效标签</span>
            </p>
        </div>
    </body>
</html>

2.3 并集选择器

选中多组标签设置相同的样式。

选择器写法：选择器1,选择器2,…,选择器N{CSS 属性}，选择器之间用,隔开。

<html>
    <head>
    <title>并集选择器</title>
    <style>
        div,
        span {
            color:red;
        }
    </style>
    </head>
    <body>
        <div>div标签</div>
        <span>span标签</span>
    </body>
</html>

2.4 交集选择器

选中同时满足多个条件的元素。

选择器写法：选择器1选择器2{CSS 属性}，选择器之间连写，没有符号。

<html>
    <head>
    <title>交集选择器</title>
    <style>
        div.box {
            color:red;
        }
    </style>
    </head>
    <body>
        <div class="box">生效标签</div>
        <div>不生效标签</div>
        <p class="box">不生效标签</p>
    </body>
</html>

2.5 伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

例如：鼠标悬停状态，选择器:hover {CSS样式}

<html>
    <head>
    <title>伪类选择器</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
    </head>

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

2.6 结构伪类选择器

作用根据元素的结构关系查找元素。

选择器	说明
E:first-child	查找第一个E 元素
E:last-child	查找最后一个E 元素
E:nth-child(N)	查找第 N 个E元素(第一个元素 N 值为1)

:nth-child（公式）如下：

功能	公式（n默认从0开始）
偶数标签	2n
奇数标签	2n+1;2n-1
找到5的倍数的标签	5n
找到第5个以后的标签	n45
找到第5个以前的标签	-n+5

<html>
    <head>
        <title>结构伪类选择器</title>
        <style>
            li:first-child {
                color: red;
            }

            li:nth-child(2) {
                color: red;
            }

            li:last-child {
                color: red;
            }

            li:nth-child(2n) {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>H1</li>
                <li>H2</li>
                <li>H3</li>
                <li>H4</li>
            </ul>
        </div>
    </body>
</html>

2.7 伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注意点:

必须设置 content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。
伪元素默认是行内显示模式。
权重和标签选择器相同。

<html>
<head>
    <title>伪元素选择器</title>
    <style>
        div::before {
            content: "好好";
        }

        div::after {
            content: "天天向上";
            color: red;
        }
    </style>
</head>
<body>
    <div>学习</div>
</body>
</html>