选择器Selector

什么是选择器

在 CSS 中，选择器用于选择你想要应用样式的 HTML 元素。选择器可以非常具体，也可以非常通用，允许你精确地控制网页的样式。

选择器的分类

选择器主要可以分为以下几类：

1. 基本选择器：

   • 元素选择器：选择所有指定类型的元素。
   • 类选择器：选择所有具有指定类名的元素。
   • ID 选择器：选择具有指定 ID 的元素。
   • 通用选择器：选择所有元素。
   • 属性选择器：选择具有指定属性或属性值的元素。

2. 组合选择器：

   • 后代选择器：选择某个元素的所有后代元素。
   • 子选择器：选择某个元素的直接子元素。
   • 相邻兄弟选择器：选择紧接在另一个元素之后的兄弟元素。
   • 通用兄弟选择器：选择某个元素之后的所有兄弟元素。

3. 伪类选择器：

   • 选择处于特定状态的元素，如鼠标悬停、被选中等。

4. 伪元素选择器：

   • 选择元素的特定部分，如首行、首字母等。

常用的选择器

1. 元素选择器：

   p {
       color: blue;
   }

2. 类选择器：

   .highlight {
       background-color: yellow;
   }

3. ID 选择器：

   #header {
       font-size: 24px;
   }

4. 通用选择器：

   * {
       margin: 0;
       padding: 0;
   }

5. 属性选择器：

   input[type="text"] {
       border: 1px solid black;
   }

常用的伪类和伪元素选择器

1. 伪类选择器：

   • :hover：当鼠标悬停在元素上时。
   • :active：当元素被激活（如点击）时。
   • :focus：当元素获得焦点时。
   • :first-child：选择作为父元素的第一个子元素的元素。
   • :last-child：选择作为父元素的最后一个子元素的元素。
   • :nth-child(n)：选择作为父元素的第 n 个子元素的元素。
   • :checked：选择被选中的复选框或单选按钮。
   • :disabled：选择被禁用的元素。
   • :enabled：选择未被禁用的元素。
   • :not(selector)：选择不匹配指定选择器的元素。

2. 伪元素选择器：

   • ::before：在元素内容之前插入生成的内容。
   • ::after：在元素内容之后插入生成的内容。
   • ::first-line：选择元素的第一行。
   • ::first-letter：选择元素的第一个字母。
   • ::selection：选择用户选中的文本。

什么是特异性

特异性（Specificity）是 CSS 中用于确定哪个样式规则应该应用于某个元素的机制。特异性值是一个四元组 (a, b, c, d)，其中：

• a 是内联样式的数量。
• b 是 ID 选择器的数量。
• c 是类选择器、属性选择器和伪类选择器的数量。
• d 是元素选择器和伪元素选择器的数量。

特异性值越高，样式规则的优先级越高。如果两个规则的特异性相同，那么后定义的规则会覆盖先定义的规则。

在写选择器时应该注意什么

1. 避免使用内联样式：尽量避免使用内联样式，因为它们的特异性最高，难以覆盖。
2. 避免使用过于具体的选择器：过于具体的选择器会导致样式的可维护性降低。
3. 使用类选择器和 ID 选择器：类选择器和 ID 选择器是编写 CSS 时最常用的选择器。
4. 遵循 DRY 原则：不要重复代码，尽量使用通用选择器和组合选择器来减少重复。
5. 使用 BEM 命名约定：BEM（Block Element Modifier）是一种命名约定，有助于提高样式的可维护性和可读性。
6. 避免使用 !important：尽量避免使用 !important，因为它会破坏样式的层叠规则，导致难以维护。

CSS 编写规范

1. 命名规范：

   • 使用有意义的类名和 ID 名。
   • 使用小写字母，单词之间用连字符 - 分隔（kebab-case）。

2. 代码格式：

   • 每个选择器和属性占一行。
   • 使用两个空格进行缩进。
   • 属性值和单位之间不留空格。
   • 使用分号 ; 结束每个属性声明。

3. 注释：

   • 使用注释来解释复杂的样式规则。
   • 注释使用 /* ... */。

4. 组织结构：

   • 按照逻辑分组样式规则。
   • 使用 CSS 预处理器（如 Sass、Less）的嵌套功能来组织样式。

5. 性能优化：

   • 避免使用过于复杂的选择器。
   • 使用 CSS 预处理器的变量和混合宏来提高代码的可维护性。

通过遵循这些规范和最佳实践，可以编写出更高效、可维护和可读的 CSS 代码。