【Java 进阶篇】CSS 选择器详解

喜欢ヅ旅行 2024-03-01 08:37 66阅读 0赞

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

CSS（层叠样式表）是一种用于描述网页上元素样式的语言。要想有效地使用CSS，了解CSS选择器是至关重要的，因为它们允许你选择要应用样式的HTML元素。在本文中，我们将详细介绍CSS选择器的各种类型和用法，以便你能够更好地掌握这一关键概念。

### 1. 什么是CSS选择器？ ###

CSS选择器是一种模式，用于选择HTML文档中的一个或多个元素，并为这些元素应用样式。选择器基于元素的标签名称、类、ID、属性等特征来选择元素。通过选择器，你可以精确地定义哪些元素将受到样式的影响。

### 2. 基本选择器 ###

#### 2.1 标签选择器 ####

标签选择器是最简单的选择器，它通过HTML元素的标签名称来选择元素。例如，要选择所有段落元素 `<p>` 并将它们的文字颜色设置为红色，可以使用以下样式：

p {
        
      color: red;
    }

这将使所有段落文本变为红色。

#### 2.2 类选择器 ####

类选择器允许你选择具有特定类名的元素。类选择器以点 `.` 开头，后面跟随类名。例如，要选择所有具有 `button` 类的按钮元素，并将它们的背景颜色设置为蓝色，可以使用以下样式：

.button {
        
      background-color: blue;
    }

#### 2.3 ID选择器 ####

ID选择器允许你选择具有特定ID属性的元素。ID选择器以井号 `#` 开头，后面跟随ID名称。ID在整个HTML文档中应该是唯一的。例如，要选择具有 `header` ID的标题元素，并将它们的字体大小设置为24像素，可以使用以下样式：

#header {
        
      font-size: 24px;
    }

### 3. 复合选择器 ###

复合选择器允许你组合多个选择器，以便更精确地选择元素。以下是一些常见的复合选择器：

#### 3.1 后代选择器 ####

后代选择器（空格）允许你选择嵌套在其他元素内部的元素。例如，要选择所有在 `<div>` 元素内部的段落元素，并将它们的文字颜色设置为绿色，可以使用以下样式：

div p {
        
      color: green;
    }

#### 3.2 子选择器 ####

子选择器（`>`）允许你选择作为另一个元素的直接子元素的元素。例如，要选择所有 `<ul>` 元素下的直接子元素 `<li>` 并将它们的文本颜色设置为橙色，可以使用以下样式：

ul > li {
        
      color: orange;
    }

#### 3.3 相邻兄弟选择器 ####

相邻兄弟选择器（`+`）允许你选择与另一个元素相邻的元素。例如，要选择所有紧跟在标题元素 `<h2>` 后面的段落元素 `<p>` 并将它们的字体设置为斜体，可以使用以下样式：

h2 + p {
        
      font-style: italic;
    }

#### 3.4 通用兄弟选择器 ####

通用兄弟选择器（`~`）允许你选择与另一个元素具有相同父元素的所有元素。例如，要选择所有与标题元素 `<h2>` 具有相同父元素的段落元素 `<p>` 并将它们的文字颜色设置为灰色，可以使用以下样式：

h2 ~ p {
        
      color: gray;
    }

### 4. 属性选择器 ###

属性选择器允许你选择具有特定属性的元素。属性选择器使用方括号 `[]`，并在方括号内指定要匹配的属性和属性值。以下是一些常见的属性选择器示例：

#### 4.1 属性选择器 ####

##### 4.1.1 属性存在选择器 #####

属性存在选择器（`[attribute]`）用于选择具有指定属性的所有元素，而不考虑其值。例如，要选择所有具有 `title` 属性的元素，并将它们的背景颜色设置为黄色，可以使用以下样式：

[title] {
        
      background-color: yellow;
    }

##### 4.1.2 属性值精确匹配选择器 #####

属性值精确匹配选择器（`[attribute=value]`）用于选择具有指定属性和精确属性值的元素。例如，要选择所有 `type` 属性值为 `text` 的输入框元素，并将它们的边框颜色设置为蓝色，可以使用以下样式：

input[type="text"] {
        
      border-color: blue;
    }

##### 4.1.3 属性值前缀匹配选择器 #####

属性值前缀匹配选择器（`[attribute^=value]`）用于选择具有指定属性且属性值以指定值开头的元素。例如，要选择所有 `src` 属性值以 `https` 开头的图片元素，并将它们的边框颜色设置为绿色，可以使用以下样式：

img[src^="https"] {
        
      border-color: green;
    }

##### 4.1.4 属性值后缀匹配选择器 #####

属性值后缀匹配选择器（`[attribute$=value]`）用于选择具有指定属性且属性值以指定值结尾的元素。例如，要选择所有 `href` 属性值以 `.pdf` 结尾的链接元素，并将它们的文本颜色设置为红色，可以使用以下样式：

a[href$=".pdf"] {
        
      color: red;
    }

##### 4.1.5 属性值包含匹配选择器 #####

属性值包含匹配选择器（`[attribute*=value]`）用于选择具有指定属性且属性值包含指定值的元素。例如，要选择所有 `class` 属性值包含 `active` 的元素，并将它们的背景颜色设置为橙色，可以使用以下样式：

[class*="active"] {
        
      background-color: orange;
    }

### 5. 伪类选择器 ###

伪类选择器允许你选择处于特定状态或位置的元素，而不是基于元素的属性或标签名称。以下是一些常见的伪类选择器示例：

#### 5.1 链接伪类选择器 ####

链接伪类选择器用于选择链接元素的不同状态。例如，要选择未被访问的链接并将其颜色设置为蓝色，可以使用以下样式：

a:link {
        
      color: blue;
    }

同样，你还可以使用 `:visited` 伪类选择已访问的链接。

#### 5.2 :hover 伪类选择器 ####

:hover 伪类选择器用于选择鼠标悬停在元素上时的状态。例如，要选择鼠标悬停在按钮元素上时，并将其背景颜色设置为浅灰色，可以使用以下样式：

button:hover {
        
      background-color: lightgray;
    }

#### 5.3 :nth-child 伪类选择器 ####

:nth-child 伪类选择器用于选择一组元素中的第 n 个元素。例如，要选择每个列表中的第偶数个列表项，并将它们的文本颜色设置为绿色，可以使用以下样式：

li:nth-child(even) {
        
      color: green;
    }

#### 5.4 :not 伪类选择器 ####

:not 伪类选择器用于选择不匹配某一条件的元素。例如，要选择除了具有类名 `special` 的元素之外的所有段落元素，并将它们的字体颜色设置为蓝色，可以使用以下样式：

p:not(.special) {
        
      color: blue;
    }

#### 5.5 :first-child 伪类选择器 ####

:first-child 伪类选择器用于选择一组元素中的第一个元素。例如，要选择每个列表中的第一个列表项，并将它们的文本颜色设置为红色，可以使用以下样式：

li:first-child {
        
      color: red;
    }

### 6. 伪元素选择器 ###

伪元素选择器允许你选择元素的特定部分，而不是整个元素。以下是一些常见的伪元素选择器示例：

#### 6.1 ::before 和 ::after 伪元素选择器 ####

::before 和 ::after 伪元素选择器用于在元素的内容之前或之后插入虚拟的元素。这些虚拟元素可以用来添加装饰性内容。例如，要在每个段落之前添加一个引号图标，可以使用以下样式：

p::before {
        
      content: "\201C"; /* Unicode编码表示左双引号 */
    }

#### 6.2 ::first-letter 伪元素选择器 ####

::first-letter 伪元素选择器用于选择元素的第一个字母或字符。例如，要选择每个段落的第一个字母并将其设置为大写，可以使用以下样式：

p::first-letter {
        
      text-transform: uppercase;
    }

#### 6.3 ::first-line 伪元素选择器 ####

::first-line 伪元素选择器用于选择元素的第一行文本。例如，要选择每个段落的第一行文本并将其设置为斜体，可以使用以下样式：

p::first-line {
        
      font-style: italic;
    }

### 7. 结合选择器 ###

你可以结合多个选择器来更精确地选择元素。这是一些常见的结合选择器的示例：

#### 7.1 选择多个类名 ####

如果一个元素具有多个类名，你可以将它们组合在一起选择。例如，要选择具有 `btn` 和 `primary` 两个类名的按钮元素，并将其背景颜色设置为蓝色，可以使用以下样式：

.button.primary {
        
      background-color: blue;
    }

#### 7.2 选择特定标签下的元素 ####

你可以结合标签选择器和类选择器来选择特定标签下的元素。例如，要选择 `<div>` 元素内部的具有 `info` 类名的段落元素，并将其文字颜色设置为绿色，可以使用以下样式：

div .info {
        
      color: green;
    }

#### 7.3 复杂的选择器组合 ####

你可以结合多个选择器来创建更复杂的选择器组合。例如，要选择具有 `main` ID 的 `<div>` 元素内部的所有直接子元素 `<p>`，并将它们的字体颜色设置为蓝色，可以使用以下样式：

div#main > p {
        
      color: blue;
    }

### 8. 总结 ###

CSS选择器是CSS中非常重要的概念，它们允许你选择要应用样式的HTML元素。本文介绍了各种类型的选择器，包括基本选择器、复合选择器、属性选择器、伪类选择器和伪元素选择器，以及如何结合它们来更精确地选择元素。通过深入了解这些选择器，你将能够更好地掌握CSS并创建精美的网页布局和样式。希望这篇文章对你有所帮助！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/01/c23e12dadb9a48f0aee8d77a27f8aad3.png