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

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

解决方案

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

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

• 元素选择器 (Element Selectors)：直接使用HTML标签名来选择元素。比如，p 选择所有段落，h1 选择所有一级标题。这就像喊名字一样直接，但缺点是范围太广，容易误伤。

  p {
    color: blue; /* 所有段落文字变蓝色 */
  }

• 类选择器 (Class Selectors)：通过HTML元素的class属性来选择元素。使用.符号开头。这是最常用的选择器之一，因为它允许你给多个元素应用相同的样式，而不需要修改HTML结构。

  <p class="highlight">这段文字需要高亮显示。</p>

  .highlight {
    background-color: yellow; /* 所有class为"highlight"的元素背景变黄 */
  }

• ID选择器 (ID Selectors)：通过HTML元素的id属性来选择元素。使用#符号开头。ID选择器具有最高的优先级，但应该谨慎使用，因为一个页面中ID应该是唯一的。

  <h1 id="main-title">主要标题</h1>

  #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>
    <p>这是div内的段落。</p>
    <span><p>这也是div内的段落。</p></span>
  </div>

  div p {
    font-style: italic; /* 所有div内的p元素字体变为斜体 */
  }

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

  <ul>
    <li>这是ul的直接子元素。</li>
    <li><span>这也是ul的直接子元素。</span></li>
  </ul>

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

• 相邻兄弟选择器 (Adjacent Sibling Selectors)：选择紧跟在指定元素后面的兄弟元素。使用+符号分隔。比如，h2 + p 选择紧跟在h2元素后面的p元素。

  <h2>标题</h2>
  <p>紧跟在标题后面的段落。</p>
  <p>另一个段落。</p>

  h2 + p {
    margin-top: 0; /* 紧跟在h2后面的p元素的上边距设为0 */
  }

• 通用兄弟选择器 (General Sibling Selectors)：选择指定元素后面的所有兄弟元素。使用~符号分隔。比如，h2 ~ p 选择h2元素后面的所有p元素。

  <h2>标题</h2>
  <p>段落1。</p>
  <p>段落2。</p>

  h2 ~ p {
    color: green; /* h2后面的所有p元素字体变为绿色 */
  }

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

• 简单属性选择器 (Simple Attribute Selectors)：选择具有指定属性的元素。比如，a[href] 选择所有具有href属性的a元素。

  <a href="https://www.example.com">链接1</a>
  <a name="link2">链接2</a>

  a[href] {
    color: red; /* 所有具有href属性的a元素字体变为红色 */
  }

• 属性值选择器 (Attribute Value Selectors)：选择具有指定属性和值的元素。比如，input[type="text"] 选择所有type属性值为text的input元素。

  <input type="text" name="username">
  <input type="password" name="password">

  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 warning">警告消息</div>
  <div class="message error">错误消息</div>
  <div class="message">普通消息</div>

  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选择器优先级决定了当多个规则应用于同一个元素时，哪个规则生效。优先级从高到低依次为：

1. !important: 强制应用该样式，但应谨慎使用，因为它会破坏CSS的层叠性。
2. 内联样式 (Inline Styles)：直接在HTML元素中使用style属性定义的样式。
3. ID选择器 (ID Selectors)：#id
4. 类选择器 (Class Selectors)、属性选择器 (Attribute Selectors)、伪类选择器 (Pseudo-classes)：.class、[attribute]、:hover
5. 元素选择器 (Element Selectors)、伪元素选择器 (Pseudo-elements)：p、::before
6. 通用选择器 (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学习网公众号！