CSS中的常见选择器

た入场券 2024-04-23 21:07 79阅读 0赞

?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?

?简历模板、学习资料、面试题库、技术互助

?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

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

## 往期热门专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Java项目实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12345409.html" rel="nofollow">介绍Java组件安装、使用；手写框架等</a></td> 
  </tr> 
  <tr> 
   <td align="left">Aws服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12492968.html" rel="nofollow">Aws Linux服务器上操作nginx、git、JDK、Vue</a></td> 
  </tr> 
  <tr> 
   <td align="left">Java微服务实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12439818.html" rel="nofollow">Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java基础篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12369312.html" rel="nofollow">Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Springboot篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12273537.html" rel="nofollow">从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring MVC篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12295009.html" rel="nofollow">从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 </a></td> 
  </tr> 
  <tr> 
   <td align="left">华为云服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12426609.html" rel="nofollow">华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java爬虫</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_8863085.html" rel="nofollow">通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Vue实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12278346.html" rel="nofollow">讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12283629.html" rel="nofollow">讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 </a></td> 
  </tr> 
 </tbody> 
</table>

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

## 前言 ##

本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。

## 1、选择器介绍 ##

在CSS（层叠样式表）中，选择器是一种用于选择 HTML 元素以应用特定样式的模式或规则。选择器通过匹配 HTML 元素的不同属性、关系或状态来确定要应用样式的目标元素。

CSS选择器的作用是根据选择器的匹配规则，选择出目标元素，并对其应用指定的样式。选择器可以根据元素的标签名、类名、ID、属性、状态等进行选择。

### 1.1、元素选择器 ###

元素选择器（Element Selector）是CSS中最基本和最常见的选择器。它使用HTML元素的标签名作为选择器，用于选择匹配标签名的所有元素。

元素选择器的语法非常简单，只需在CSS中使用标签名作为选择器即可。例如，要选择所有的段落元素，可以使用`p`作为选择器。

#### 1.1.1、标签选择器 ####

使用HTML标签名作为选择器，选择匹配标签名的所有元素。例如，`p`选择所有的段落元素，`h1`选择所有的一级标题元素。

p {
        
      background-color: yellow;
    }

#### 1.1.2、通配符选择器 ####

使用`*`作为选择器，匹配所有的元素。例如，`*`选择所有的元素。

* {
        
      background-color: yellow;
    }

#### 1.1.3、类型选择器 ####

使用元素的特定类型作为选择器，选择匹配指定类型的元素。例如，`input`选择所有的输入框元素，`a`选择所有的锚点元素。

input {
        
      background-color: yellow;
    }

选择器非常灵活，可以用于选择单个元素或多个匹配的元素，并针对其应用相应的样式。可以通过组合元素选择器和其他选择器来实现更具体和精确的选择。

需要注意的是，元素选择器会选择所有匹配的元素，因此在使用时要确保选择器的准确性和误用的风险。

### 1.2、类选择器 ###

类选择器（Class Selector）是CSS中一种常用的选择器，用于选择具有相同类名的元素。它以点.开头，后面跟着类名。  
类选择器的语法如下：

.classname {
        
      /* CSS属性和值 */
    }

其中，点.表示类选择器，后面紧跟着类名（可以是任何有效的CSS类名）。在HTML中，当一个元素的class属性值与类选择器匹配时，该元素就会应用类选择器中定义的样式。

以下是一个具体的示例，假设我们有一些HTML元素使用了相同的类名`highlight`，我们可以通过类选择器来为它们设置样式：

.highlight {
        
      background-color: yellow;
      color: red;
    }

上述代码将选择所有类名为`highlight`的元素，并设置它们的背景颜色为黄色，文本颜色为红色。  
需要注意的是，类选择器可以重复使用，一个元素可以拥有多个类名。这样可以更灵活地为元素应用不同的样式。例如：

<div class="highlight bold">这是一个示例文本</div>

上述代码中的`div`元素同时具有`highlight`和`bold`两个类名，可以分别通过`.highlight`和`.bold`类选择器来为其设置样式。

## 2、ID选择器 ##

ID选择器（ID Selector）是CSS中一种常用的选择器，用于通过元素的唯一标识符选择特定的元素。它以井号\#开头，后面跟着ID名称。

ID选择器的语法如下：

#idname {
        
      /* CSS属性和值 */
    }

其中，井号\#表示ID选择器，后面紧跟着ID名称（可以是任何有效的CSS ID名称）。在HTML中，当一个元素的id属性值与ID选择器匹配时，该元素就会应用ID选择器中定义的样式。

需要注意的是，ID在整个HTML文档中应该是唯一的，即每个元素只能有一个ID，并且ID不能以数字开头。因为ID具有唯一性，所以使用ID选择器可以精确地选择页面上的特定元素。

以下是一个具体的示例，假设我们有一个具有唯一ID的`<div>`元素：

<div id="mydiv">这是一个示例文本</div>

我们可以使用ID选择器来为其设置样式：

#mydiv {
        
      background-color: yellow;
      color: red;
    }

上述代码将选择具有ID为`mydiv`的`<div>`元素，并设置其背景颜色为黄色，文本颜色为红色。

需要注意的是：ID选择器具有更高的优先级，如果同时使用类选择器和ID选择器来选择相同的元素，ID选择器的样式将覆盖类选择器的样式。因此，应谨慎使用ID选择器，以确保样式的准确应用。

## 3、交集选择器 ##

交集选择器（Intersection Selector）是CSS中一种选择器，用于选择同时具有多个类名的元素。它使用类选择器的语法，并将多个类名连在一起，中间没有任何符号。

交集选择器的语法如下：

.class1.class2 {
        
      /* CSS属性和值 */
    }

`.class1`和`.class2`表示类选择器，通过这种组合的方式，选择具有同时包含类名`.class1`和`.class2`的元素。这样可以在不修改HTML结构的情况下，针对特定的元素应用样式。

以下是一个具体的示例，假设我们有一个HTML中的`<div>`元素，同时具有类名`.highlight`和`.bold`：

<div class="highlight bold">这是一个示例文本</div>

我们可以使用交集选择器来为它设置样式：

.highlight.bold {
        
      font-weight: bold;
      color: red;
    }

上述代码将选择同时具有`.highlight`和`.bold`类名的`<div>`元素，并设置其字体加粗和字体颜色为红色。

需要注意的是，交集选择器要求元素同时具有所有选择器中指定的类名，只有在两个类名同时存在时才会应用样式。如果两个类名分别位于不同的元素上，则不会匹配。这种方式有助于更加精确地选择元素，并为其应用特定的样式。

## 4、并集选择器 ##

并集选择器（Union Selector）是CSS中一种选择器，用于同时选择多个元素或选择多个类名或ID的元素。它使用逗号（,）将多个选择器或类名/ID名连接在一起。

并集选择器的语法如下：

selector1, selector2 {
        
      /* CSS属性和值 */
    }

`selector1`和`selector2`表示选择器，通过逗号分隔，将多个选择器组合在一起。这样可以同时选择多个元素，并为它们应用相同的样式。

### 4.1、并集选择器选择多个元素 ###

h1, h2, h3 {
        
      color: blue;
      font-weight: bold;
    }

上述代码将选择页面上的所有`<h1>`、`<h2>`和`<h3>`元素，并设置它们的字体颜色为蓝色、字体加粗。

### 4.2、并集选择器选择多个类名 ###

.highlight, .bold {
        
      background-color: yellow;
      color: red;
    }

上述代码将选择所有具有`.highlight`类名和所有具有`.bold`类名的元素，并设置它们的背景颜色为黄色，文本颜色为红色。

### 4.3. 并集选择器选择多个ID ###

#mydiv, #mysection {
        
      border: 1px solid black;
      padding: 10px;
    }

上述代码将选择具有ID为`mydiv`和具有ID为`mysection`的元素，并设置它们的边框为1px实线黑色，内边距为10px。  
需要注意的是，并集选择器可以组合不同类型的选择器，如标签选择器、类选择器、ID选择器等，以便同时选择不同类型的元素并应用相同的样式。使用并集选择器可以减少代码重复，并为多个元素一次性应用相同的样式。

## 5、后代选择器 ##

后代选择器（Descendant Selector）是CSS中一种选择器，用于选择元素的后代元素，即在某个元素内部的子孙元素。它使用空格（）将两个选择器连接在一起。

后代选择器的语法如下：

selector1 selector2 {
        
      /* CSS属性和值 */
    }

`selector1`和`selector2`表示选择器，通过空格将它们连接在一起。选择器1选择了父元素（祖先元素），而选择器2选择了后代元素（子孙元素）。这样可以根据元素的层级关系来选择并应用样式。  
以下是一个具体的例子，我们有一个HTML结构

<div class="container">
      <h1>标题</h1>
      <p>这是一个段落</p>
    </div>

我们可以使用后代选择器来选择`<div>`元素内部的`<h1>`元素并设置样式

.container h1 {
        
      color: blue;
    }

上述代码将选择具有`.container`类名的`<div>`元素内部的`<h1>`元素，并将其文字颜色设置为蓝色。

需要注意的是，后代选择器会匹配所有符合条件的后代元素，无论它们的层级有多深。选择器2可以是任何有效的CSS选择器，可以是标签选择器、类选择器、ID选择器等。

后代选择器的优势在于它可以非常灵活地选择元素的特定后代，而不受层级的限制。通过合理运用后代选择器，可以准确地选择并应用样式于所需的元素。

## 6、子代选择器 ##

子代选择器（Child Selector）是CSS中一种选择器，用于选择元素的直接子元素（子节点），即在某个父元素下的直接子元素。它使用大于号（>）将两个选择器连接在一起。

子代选择器的语法如下

selector1 > selector2 {
        
      /* CSS属性和值 */
    }

`selector1`和`selector2`表示选择器，通过大于号连接在一起。选择器1选择了父元素，而选择器2选择了父元素的直接子元素。这样可以选择并应用样式于父元素的直接子元素，而不会选择孙子元素及更深层级的后代元素。

以下是一个具体的例子，我们有一个HTML结构：

<div class="container">
      <div>
        <div>
          <h1>
            标题
          </h1>
        </div>
      </div>
      <div>
        <p>这是一个段落</p>
      </div>
      <h1>11111111</h1>
      <p>这是一个段落</p>
    </div>

.container > p {
        
        color: blue;
    }

上述代码将选择`.container`元素下所有的第一代后代`<p>`元素，并将它们的文字颜色设置为蓝色。

我们可以使用子代选择器来选择`<ul>`元素下直接的`<li>`元素并设置样式

ul > li {
        
      color: red;
    }

上述代码将选择`<ul>`元素下直接的`<li>`元素，并将它们的文字颜色设置为红色。

需要注意的是，子代选择器只选择父元素的直接子元素，不包括更深层级的后代元素。选择器2可以是任何有效的CSS选择器，可以是标签选择器、类选择器、ID选择器等。

子代选择器在一些特定的布局需求下非常有用，可以在层级结构中精确选择特定的子元素，并为其应用样式。同时，子代选择器的使用还能够提高CSS选择器的性能，因为它的范围被限制在了直接子元素上。

## 7、兄弟选择器 ##

兄弟选择器（Sibling Selector）是CSS中一种选择器，用于选择元素的兄弟元素，即与某个元素拥有相同父元素的其他元素。它使用加号（+）将两个选择器连接在一起。

兄弟选择器的语法如下：

selector1 + selector2 {
        
      /* CSS属性和值 */
    }

其中，`selector1`和`selector2`表示选择器，通过加号连接在一起。选择器1选择了某个元素，而选择器2选择了与选择器1拥有相同父元素的下一个兄弟元素。这样可以选择并应用样式于兄弟元素。

以下是一个具体的例子，我们有一个HTML结构

<ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    
    ul li:first-child + li {
      color: blue;
    }

上述代码将选择`<ul>`元素下第一个`<li>`元素的兄弟元素（第二个和第三个`<li>`元素），并将它们的文字颜色设置为蓝色。

需要注意的是，兄弟选择器只会匹配在相同父元素下的下一个兄弟元素，不会匹配更远的兄弟元素。选择器2可以是任何有效的CSS选择器，例如标签选择器、类选择器、ID选择器等。

兄弟选择器在一些特定的布局需求下非常有用，可以选择特定元素的下一个兄弟元素并为其应用样式。通过使用兄弟选择器，可以在不使用额外的类名或ID的情况下，精确选择并应用样式于特定的兄弟元素。

## 8、属性选择器 ##

属性选择器（Attribute Selector）是CSS中一种用于选择具有指定属性的元素的选择器。属性选择器允许根据元素的属性及其属性值来选择并应用样式。

属性选择器有以下三种常见的语法形式：

*  1.  存在和值属性选择器:  
        `[attribute]`：选择具有指定属性的元素。  
        `[attribute=value]`：选择属性值与指定值完全匹配的元素。
 *  1.  部分值属性选择器:  
        `[attribute^=value]`：选择属性值以指定值开头的元素。  
        `[attribute$=value]`：选择属性值以指定值结尾的元素。  
        `[attribute*=value]`：选择属性值包含指定值的元素。
 *  1.  精确值和多值属性选择器:  
        `[attribute|=value]`：选择属性值与指定值完全匹配或以指定值及连字符开头的元素。  
        `[attribute~=value]`：选择属性值中包含指定值作为一个单词（空格分隔）的元素。  
        `[attribute*=value]`：选择属性值与指定值完全匹配或以指定值及空格开头的元素。

以下是一些具体的例子，说明如何使用属性选择器：

/* 选择所有有href属性的元素 */
    [href] {
        
      color: blue;
    }
     
    /* 选择class属性值为"button"的元素 */
    [class="button"] {
        
      background-color: yellow;
    }
     
    /* 选择src属性值以".jpg"结尾的元素 */
    [src$=".jpg"] {
        
      border: 1px solid black;
    }
     
    /* 选择class属性值包含"active"的元素 */
    [class*="active"] {
        
      font-weight: bold;
    }

使用属性选择器，可以根据元素的属性及其属性值来选择元素，从而实现对元素的样式控制。属性选择器提供了一种灵活的方式来选择元素，使得样式可以根据元素的属性动态变化或特定条件下应用。

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

资料获取，更多粉丝福利，关注下方公众号获取

![在这里插入图片描述][a74f7d5d03234f7c8a635562034442a0.gif_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6e5684a9a7744ad3bb3e2182c83d2896.png
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f1d2b92cd9ca4eca89b2eb26c64f75b2.gif