当前位置：首页 > 文章列表 > 文章 > 前端 > CSS选择器不会用？手把手教你快速掌握选择器技巧

CSS选择器不会用？手把手教你快速掌握选择器技巧

2025-06-22 19:49:19 0浏览收藏

CSS选择器是前端开发的核心技能，掌握它能精准定位HTML元素并应用样式。本文将手把手教你搞定CSS选择器，从基础的元素、类、ID和通用选择器，到后代、子元素等组合选择器，再到属性、伪类和伪元素选择器，逐一解析其用法和特性。此外，还会深入探讨选择器的优先级、性能优化技巧，以及:is()、:where()、:has()等高级用法。更进一步，我们将讲解CSS选择器在响应式设计中的应用，如何通过媒体查询和CSS变量实现不同屏幕尺寸下的适配。最后，还将介绍CSS选择器与JavaScript的交互，教你如何使用JavaScript动态修改CSS样式，打造更具交互性的网页。掌握这些知识，你就能轻松驾驭CSS，让网页呈现出你想要的效果。

CSS选择器用于定位HTML元素并应用样式。1.基础选择器包括元素、类、ID和通用选择器；2.组合选择器包含后代、子、相邻兄弟和通用兄弟选择器；3.属性选择器根据属性值选择元素；4.伪类选择器处理元素状态；5.伪元素选择器控制特定部分；6.否定伪类排除特定元素。优先级从高到低为!important、内联样式、ID、类/属性/伪类、元素/伪元素。优化方法包括避免通用选择器、减少嵌套、使用类选择器、合并规则和工具分析。高级用法有:is()、:where()、:has()和逻辑组合选择器。响应式设计通过媒体查询、设备方向和CSS变量实现。JavaScript交互通过querySelector()、修改style、操作类名和CSS变量完成，需注意性能。

CSS选择器怎么使用选择器使用教程

CSS选择器，简单说，就是你告诉浏览器：“嘿，把所有符合这个规则的HTML元素，都给我套上这身CSS衣服！” 至于怎么用？嗯，这就得细细道来了。

解决方案

CSS选择器是CSS规则的核心，它允许你精确地定位到HTML文档中的元素，并应用相应的样式。掌握好CSS选择器，你就掌握了CSS的半壁江山。

1. 基础选择器：简单直接，但也很重要

元素选择器 (Element Selectors)：直接使用HTML标签名来选择元素。比如，p 选择所有段落，h1 选择所有一级标题。这就像喊名字一样直接，但缺点是范围太广，容易误伤。
```
p {
  color: blue; /* 所有段落文字变蓝色 */
}
```
类选择器 (Class Selectors)：通过HTML元素的class属性来选择元素。使用.符号开头。这是最常用的选择器之一，因为它允许你给多个元素应用相同的样式，而不需要修改HTML结构。
```
这段文字需要高亮显示。
```
```
.highlight {
  background-color: yellow; /* 所有class为"highlight"的元素背景变黄 */
}
```
ID选择器 (ID Selectors)：通过HTML元素的id属性来选择元素。使用#符号开头。ID选择器具有最高的优先级，但应该谨慎使用，因为一个页面中ID应该是唯一的。
```
主要标题
```
```
#main-title {
  font-size: 2em; /* ID为"main-title"的元素字体大小变为2倍 */
}
```
通用选择器 (Universal Selector)：使用*符号选择所有元素。通常用于重置样式或应用全局样式。要小心使用，因为它会影响所有元素，性能开销较大。
```
* {
  margin: 0;
  padding: 0; /* 重置所有元素的margin和padding */
}
```

2. 组合选择器：更精确的定位，更强大的控制

后代选择器 (Descendant Selectors)：选择指定元素的所有后代元素。使用空格分隔。比如，div p 选择所有在div元素内的p元素。
```
  这是div内的段落。
  这也是div内的段落。
```
```
div p {
  font-style: italic; /* 所有div内的p元素字体变为斜体 */
}
```

子选择器 (Child Selectors)：选择指定元素的直接子元素。使用>符号分隔。比如，ul > li 选择所有ul元素的直接子元素li。


  这是ul的直接子元素。
  这也是ul的直接子元素。

ul > li {
  list-style-type: square; /* 所有ul的直接子元素li的列表样式变为方形 */
}

相邻兄弟选择器 (Adjacent Sibling Selectors)：选择紧跟在指定元素后面的兄弟元素。使用+符号分隔。比如，h2 + p 选择紧跟在h2元素后面的p元素。
```
标题
紧跟在标题后面的段落。
另一个段落。
```
```
h2 + p {
  margin-top: 0; /* 紧跟在h2后面的p元素的上边距设为0 */
}
```
通用兄弟选择器 (General Sibling Selectors)：选择指定元素后面的所有兄弟元素。使用~符号分隔。比如，h2 ~ p 选择h2元素后面的所有p元素。
```
标题
段落1。
段落2。
```
```
h2 ~ p {
  color: green; /* h2后面的所有p元素字体变为绿色 */
}
```

3. 属性选择器：根据元素的属性值来选择

简单属性选择器 (Simple Attribute Selectors)：选择具有指定属性的元素。比如，a[href] 选择所有具有href属性的a元素。
```
链接1
链接2
```
```
a[href] {
  color: red; /* 所有具有href属性的a元素字体变为红色 */
}
```
属性值选择器 (Attribute Value Selectors)：选择具有指定属性和值的元素。比如，input[type="text"] 选择所有type属性值为text的input元素。
```
input[type="text"] {
  border: 1px solid blue; /* 所有type为"text"的input元素边框变为蓝色 */
}
```
部分属性值选择器 (Partial Attribute Value Selectors)：
- [attribute~="value"]：选择属性值包含指定单词的元素。
- [attribute|="value"]：选择属性值以指定值开头，或者以该值后跟连字符“-”开头的元素。
- [attribute^="value"]：选择属性值以指定值开头的元素。
- [attribute$="value"]：选择属性值以指定值结尾的元素。
- [attribute*="value"]：选择属性值包含指定值的元素。
```
警告消息
错误消息
普通消息
```
```
div[class~="message"] {
  padding: 10px;
  border: 1px solid black;
}

div[class*="error"] {
  background-color: red;
  color: white;
}
```

4. 伪类选择器：选择元素的特殊状态

伪类选择器允许你选择元素的特殊状态，例如鼠标悬停、链接访问等。

:hover: 当鼠标悬停在元素上时应用样式。

a:hover {
  color: orange; /* 鼠标悬停在链接上时字体变为橙色 */
}

:active: 当元素被激活（例如，鼠标点击）时应用样式。

button:active {
  background-color: darkgray; /* 按钮被点击时背景变为深灰色 */
}

:focus: 当元素获得焦点（例如，通过Tab键导航）时应用样式。

input:focus {
  border-color: green; /* 输入框获得焦点时边框变为绿色 */
}

:visited: 选择已访问的链接。

a:visited {
  color: purple; /* 已访问的链接字体变为紫色 */
}

:first-child: 选择元素的第一个子元素。

ul li:first-child {
  font-weight: bold; /* 列表的第一个子元素字体加粗 */
}

:last-child: 选择元素的最后一个子元素。

ul li:last-child {
  border-bottom: none; /* 列表的最后一个子元素去除下边框 */
}

:nth-child(n): 选择元素的第n个子元素。n 可以是数字、odd (奇数) 或 even (偶数)。
```
tr:nth-child(even) {
  background-color: #f2f2f2; /* 表格的偶数行背景变为浅灰色 */
}
```

:nth-of-type(n): 选择特定类型的第n个兄弟元素。

p:nth-of-type(2) {
  color: blue; /* 第二个p元素字体变为蓝色 */
}

5. 伪元素选择器：创造虚拟元素，增强样式

伪元素选择器允许你选择元素的特定部分，或者创建虚拟元素。

::before: 在元素的内容之前插入内容。通常与content属性一起使用。
```
p::before {
  content: "提示：";
  font-weight: bold;
}
```
::after: 在元素的内容之后插入内容。通常与content属性一起使用。
```
a::after {
  content: " (链接)";
  font-size: smaller;
}
```
::first-line: 选择元素的第一行文本。
```
p::first-line {
  font-size: 1.2em;
}
```

::first-letter: 选择元素的第一个字母。

p::first-letter {
  font-size: 2em;
  float: left;
}

::selection: 选择用户选择的文本。

::selection {
  background-color: yellow;
  color: black;
}

6. 否定伪类选择器：排除特定元素

:not(selector): 选择不匹配指定选择器的元素。

:not(p) {
  border: 1px solid red; /* 除了p元素，所有元素都添加红色边框 */
}

CSS选择器优先级：理解权重，避免样式冲突

CSS选择器优先级决定了当多个规则应用于同一个元素时，哪个规则生效。优先级从高到低依次为：

!important: 强制应用该样式，但应谨慎使用，因为它会破坏CSS的层叠性。
内联样式 (Inline Styles)：直接在HTML元素中使用style属性定义的样式。
ID选择器 (ID Selectors)：#id
类选择器 (Class Selectors)、属性选择器 (Attribute Selectors)、伪类选择器 (Pseudo-classes)：.class、[attribute]、:hover
元素选择器 (Element Selectors)、伪元素选择器 (Pseudo-elements)：p、::before
通用选择器 (Universal Selector)：*

当优先级相同时，后定义的规则会覆盖先定义的规则。

CSS选择器性能优化：提升网页加载速度

*避免使用通用选择器 (``)**: 它会匹配所有元素，性能开销很大。
避免过度嵌套的选择器: 例如，div ul li a 这样的选择器会增加浏览器的查找时间。
使用类选择器而不是ID选择器: 类选择器的性能通常比ID选择器更好。
减少选择器的数量: 合并相似的规则，减少CSS文件的体积。
使用浏览器开发者工具: 分析CSS选择器的性能，找出瓶颈。

副标题1

CSS选择器有哪些高级用法？如何提高选择器的效率？

除了上述基础和组合选择器外，还有一些高级用法可以帮助你更精确地控制样式：

:is() 伪类: 允许你将多个选择器组合在一起，简化CSS代码。

:is(h1, h2, h3) {
  color: blue;
}

/* 等同于 */

h1, h2, h3 {
  color: blue;
}

:where() 伪类: 与 :is() 类似，但 :where() 的优先级总是为 0，可以更容易地覆盖样式。
```
:where(h1, h2, h3) {
  color: blue;
}
```
:has() 伪类 (CSS Selectors Level 4): 选择包含特定元素的元素。这个选择器非常强大，但浏览器支持度还不够完善。
```
div:has(p) {
  border: 1px solid black; /* 选择包含p元素的div元素 */
}
```
逻辑组合选择器 (CSS Selectors Level 4): 允许你使用 and、or、not 等逻辑运算符组合选择器。这个选择器功能非常强大，但浏览器支持度还不够完善。
```
/* 选择同时具有class="message"和class="warning"的div元素 */
div.message:is(.warning) {
  background-color: yellow;
}
```

提高选择器效率的关键在于：

减少选择器的复杂性: 避免过度嵌套和使用复杂的属性选择器。
使用更具体的选择器: 例如，使用类选择器而不是元素选择器。
避免在JavaScript中使用CSS选择器: JavaScript选择器的性能通常比CSS选择器差。

副标题2

CSS选择器在响应式设计中的应用？如何根据屏幕尺寸应用不同的样式？

CSS选择器在响应式设计中扮演着重要的角色，它们允许你根据不同的屏幕尺寸、设备类型等条件应用不同的样式。

媒体查询 (Media Queries)：使用 @media 规则来定义不同屏幕尺寸下的样式。

/* 当屏幕宽度小于600px时应用以下样式 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 当屏幕宽度大于等于600px且小于900px时应用以下样式 */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 16px;
  }
}

/* 当屏幕宽度大于等于900px时应用以下样式 */
@media (min-width: 900px) {
  body {
    font-size: 18px;
  }
}

设备方向 (Orientation)：根据设备的横向或纵向方向应用不同的样式。

/* 当设备处于横向模式时应用以下样式 */
@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

/* 当设备处于纵向模式时应用以下样式 */
@media (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}

使用CSS变量 (CSS Variables)：定义一些通用的样式变量，然后在媒体查询中修改这些变量的值。

:root {
  --main-font-size: 16px;
}

body {
  font-size: var(--main-font-size);
}

@media (max-width: 600px) {
  :root {
    --main-font-size: 14px;
  }
}

副标题3

CSS选择器与JavaScript的交互？如何使用JavaScript动态修改CSS样式？

CSS选择器不仅可以用于定义静态样式，还可以与JavaScript结合，实现动态修改样式的效果。

使用querySelector()和querySelectorAll()方法: 这两个方法允许你使用CSS选择器来选择HTML元素。

// 选择第一个p元素
const paragraph = document.querySelector('p');

// 选择所有class为"highlight"的元素
const highlightedElements = document.querySelectorAll('.highlight');

修改元素的style属性: 你可以直接修改元素的style属性来改变其样式。

paragraph.style.color = 'red'; // 将第一个p元素的字体颜色改为红色

highlightedElements.forEach(element => {
  element.style.backgroundColor = 'yellow'; // 将所有class为"highlight"的元素背景颜色改为黄色
});

添加或删除类名: 你可以使用classList属性来添加或删除类名，从而改变元素的样式。

paragraph.classList.add('bold'); // 给第一个p元素添加"bold"类

highlightedElements.forEach(element => {
  element.classList.remove('highlight'); // 移除所有class为"highlight"的元素的"highlight"类
});

使用CSS变量: 你可以使用JavaScript来修改CSS变量的值，从而改变整个页面的样式。

document.documentElement.style.setProperty('--main-font-size', '20px'); // 将根元素的"--main-font-size"变量值改为20px

在使用JavaScript动态修改CSS样式时，需要注意性能问题。频繁地修改样式可能会导致页面卡顿。建议尽量使用类名来控制样式，而不是直接修改style属性。

以上就是《CSS选择器不会用？手把手教你快速掌握选择器技巧》的详细内容，更多关于JavaScript,性能优化,响应式设计,CSS选择器,伪类的资料请关注golang学习网公众号！

JavaScript 性能优化响应式设计 CSS选择器伪类

豆包AI这么用！手把手教你用它轻松生成响应式网页代码

上一篇: 豆包AI这么用！手把手教你用它轻松生成响应式网页代码

下一篇: Redis+MongoDB双剑合璧，打造高效数据库读写全攻略

查看更多