CSS八大常用选择器详解

淡淡的烟草味﹌ 2024-03-22 18:43 73阅读 0赞

**目录**

选择器的功能

基础选择器

1) 标签选择器

2) 类选择器

3) id 选择器

4) 通配符选择器

复合选择器

1) 后代选择器

2) 子选择器

3) 并集选择器

4) 伪类选择器

--------------------

## 选择器的功能 ##

作为选择器,顾名思义,就是**选中页面中的标签元素**. 我们使用CSS都是为了美化页面的,因此只有选中了页面中的元素之后, 才能对它们设定相应的属性.(就好比我们玩的红警, SC2, War3这样的游戏,即先选中单位,才能指挥单位进行行动. )

## 基础选择器 ##

#### 1) 标签选择器 ####

**特点:**

*  能够快速**将同一类型的标签全部选择出来**
 *  正因为其选择的时候是选择一类的标签,因此**不能进行差异化选择**, (很多时候我们还是需要针对特定的标签设定样式)

> 代码示例

<style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style>
    
    
    <div>
        标签选择器
    </div>
    <p>
        类选择器
    </p>
    <div>
        id选择器
    </div>
    <p>
        通配符选择器
    </p>

> 效果如下

![348e353af78a4731a92b2c837d39aec2.png][]

#### 2) 类选择器 ####

**特点:**

*  因为每一个标签,我们可以特定的指定类名,因此类选择器**可以差异化的选中不同的标签**
 *  同时因为类名可以重复,即让多个标签都使用同一个类名,因此也**可以灵活的选中多个标签**

**语法细节:**

*  CSS中使用 **.** 开头表示类选择器
 *  需要在想要选中的标签中设置 class 属性
 *  一个类可以被多个标签使用, 一个标签也能使用多个类(**多个类名需要用空格分割**)
 *  如果类名较长,建议使用 **-** 分割
 *  类名尽量不要使用纯数字, 中文和标签名,容易出问题

> 代码示例

<style>
        .box {
            font-size: 50px;
        }
        .green {
            background-color: green;
        }
        .red {
            background-color: red;
        }
    </style>
    
    
    <div class="box green">类选择器</div>
    <div class="red">类选择器</div>
    <div class="box green">类选择器</div>

> 效果如下

![ab6e7d1e06bb44b29ee7391d9005faf5.png][]

可以很明显的看到, .box 选择器选中了第一和第三行,设置了字体大小, 而 .green 和 .red 选择器都正确选中了对应的行.

#### 3) id 选择器 ####

**特点:**

*  因为每一个标签,我们可以特定的指定id,因此id选择器**可以差异化的选中特定的id的标签**
 *  但是因为id是不可以重复的,因此**id选择器不能选中多个标签**(但是也可以通过复合的id选择器来实现选中多个标签)

**语法细节:**

*  CSS中使用\#开头的选id选择器
 *  html中的元素id不需要带\#
 *  id是唯一的,不可以被多个标签一起使用

> 代码示例

<style>
        #label1 {
            background-color: blue;
        }
    </style>
    
    
    <div id="label1">id选择器</div>
    <div id="label2">id选择器</div>

> 效果如下

![b82f17a5d2cd49199843d5823451b852.png][]

#### 4) 通配符选择器 ####

**特点:**

*  使用 **\*** 可以选中页面中所有的标签,一般用来指定html页面中最基本的属性

> 代码示例

<style>
        * {
            color:chocolate;
        }
    </style>
    
    
    <div id="label1">通配符选择器</div>
    <div id="label2">通配符选择器</div>
    <div id="label3">通配符选择器</div>
    <div id="label4">通配符选择器</div>
    <div id="label5">通配符选择器</div>
    <div id="label6">通配符选择器</div>

> 效果如下

![4016f1757ac14a5f9369704771022bf3.png][]

## 复合选择器 ##

#### 1) 后代选择器 ####

后代选择器也叫包含选择器,主要的目的就是选择父元素下的某些子元素

**基本格式如下:**

> 元素1 元素2 ....... \{ 设置属性 \}

*  元素1和元素2要使用空格分割
 *  元素1是父级,元素2是子集,选中的是元素2,不会选中元素1
 *  元素2不一定是儿子,也可以是孙子 ,重孙子等其后代
 *  可以是任意选择器的组合(类选择器,id选择器等)
 *  元素的数量不限于两个

> 代码示例

> 效果如下

![c7e826d5321447e29b75f1ed8c4b701f.png][]

> 代码示例 (演示选中的子元素可以不是儿子,只要是其后代都行)

<style>
        div li{
            color: blue;
        }
    </style>
    
    <div>
        <ul>
            <li>标签选择器</li>
            <li>类选择器</li>
            <li>id选择器</li>
            <li>通配符选择器</li>
        </ul>
    </div>
    
    <div>
        <ol>
            <li>后代选择器</li>
            <li>子选择器</li>
            <li>并集选择器</li>
            <li>伪类选择器</li>
        </ol>
    </div>

> 效果如下

![0737f625b62345f0bf26e07a4458137d.png][]

> 代码示例: (这里演示一下后代选择器可以是任意基础选择器的组合)

<style>
        .one #test{
            color: blue;
        }
    </style>
    
    <div class="one">
        <ul id="test">
            <li>标签选择器</li>
            <li>类选择器</li>
            <li>id选择器</li>
            <li>通配符选择器</li>
        </ul>
    </div>
    
    <div>
        <ol>
            <li>后代选择器</li>
            <li>子选择器</li>
            <li>并集选择器</li>
            <li>伪类选择器</li>
        </ol>
    </div>

> 效果如下

![30d62102e18f4d138e1956a0992bfc3c.png][]

#### 2) 子选择器 ####

子选择器的用法和后代选择器类似,但是最大的区别是**子选择器只能选择其子标签中满足条件的**,不能选择孙子,重孙子的等标签,而**后代选择器可以选择其所有后代中满足条件的**.

**基本格式如下:**

> 元素1>元素2 \{ 设置属性 \}

*  元素的个数不限于两个,可以是很多个
 *  元素之间用 **>** 分割
 *  只能选择亲儿子,不能选择孙子,重孙子等元素

> 代码示例

<style>
        .two>a {
            color: red; 
        }
    </style>
    
    <div class="two">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
    </div>

> 效果如下

![5facf49940b6418eb21eca00420b7dcd.png][]

#### 3) 并集选择器 ####

可以选择多组标签

**基本格式如下:**

> 元素1,元素2 \{ 设置属性 \}

*  通过 **,** 分割每个元素
 *  可以**同时选中列出的所有元素**
 *  并集选择器可以是任何基础选择器的组合
 *  并集选择器**建议竖着写**, 即每个元素占一行,最后一个选择器不能加逗号.

> 代码示例

<style>
        /* 这里演示使用一下前面的子选择器和后代选择器 */
        .one>ul,
        div ol li {
            color: brown;
        }
    </style>
    
    <div class="one">
        <ul id="test">
            <li>标签选择器</li>
            <li>类选择器</li>
            <li>id选择器</li>
            <li>通配符选择器</li>
        </ul>
    </div>
    
    <div>
        <ol>
            <li>后代选择器</li>
            <li>子选择器</li>
            <li>并集选择器</li>
            <li>伪类选择器</li>
        </ol>
    </div>

> 效果如下

![68727c2d789144da92c25e02b0364f7d.png][]

#### 4) 伪类选择器 ####

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。这里我们主要介绍以下两类伪类选择器.

#### 1. 链接伪类选择器 ####

> a:link 选择未被访问过的链接
> 
> a:visited 选择已经被访问过的链接
> 
> a:hover 选择鼠标指针悬停上的链接
> 
> a:active 选择活动链接(鼠标按下了但是还未弹起的链接)

**注意事项:**

*  设置的时候**需要按照 LVHA 的顺序**设置,例如需要设置hover和active时,将active拿到hover前面,就会导致active失效
 *  浏览器的 a标签 有默认的样式, 但是在开发中一般都是需要制定样式的

> 代码示例

这里因为是配合鼠标来展示颜色的变化,因此这里不展示结果,你们可以自己copy一下代码,跑一下感受一下.

#### 2. :focus 伪类选择器 ####

> **:focus** 选取获取焦点的 input 表单元素

> 代码示例

> 效果如下

![240855ae737a49d8b86f608f0ee9dbba.png][]

这个效果中,我们点击后的按钮就变为了红色了,当点击另一个按钮后,红色也会随之转移.

--------------------

## 总结 ##

本篇博客详细介绍了CSS的八种选择器,较为重要,因此CSS中合理正确的选中元素是修改元素属性的基础. 最后,如果本篇博客对您有帮助的话,就帮小编评论点赞收藏关注走一波,万分感谢!!!

[348e353af78a4731a92b2c837d39aec2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/80d7c6c3c76a495cbd103a6191f63077.png
[ab6e7d1e06bb44b29ee7391d9005faf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2a1075b1100f4c8d99cbc43a53708e66.png
[b82f17a5d2cd49199843d5823451b852.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/44939423fc954ffdb578a8e717c0abca.png
[4016f1757ac14a5f9369704771022bf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9476e267771d40e793852106c35b2b01.png
[c7e826d5321447e29b75f1ed8c4b701f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cb89d51521c444b4ac09d400a23b4451.png
[0737f625b62345f0bf26e07a4458137d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1a1677158ee54d5c8aad97a74b4016a0.png
[30d62102e18f4d138e1956a0992bfc3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1c36766df1014fd7af704164984144dc.png
[5facf49940b6418eb21eca00420b7dcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d295285d953145e5a1ff4bf6104ac20f.png
[68727c2d789144da92c25e02b0364f7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3c996798d1a049e29cef2e66a86c8bdc.png
[240855ae737a49d8b86f608f0ee9dbba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a4408a6da9e74c17be4bae975e6fec0a.png