选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*{
      margin: 0;
      padding: 0;
}

元素选择器

HTML文档中的元素，p、b、div、a、img、body等 标签选择器，选择的是页面上所有这种类型的标签，用来描述共性，无法描述某一元素的个性

p{
     font-size: 14px;
}

特点：

• 所有的标签，都可以是选择器
• 无论这个标签藏得多深（也就是外部被嵌套多层），都一定能够被选择上
• 选择这种元素所有的该类型标签

类选择器

规定用圆点 .来定义，针对想要的所有标签使用 类选择器的优点是灵活，是最广泛使用的选择器

<h2 class="oneclass">你好</h2>

.oneclass{
    width:800px;
}

class属性的特点：

• 类选择器可以被多种标签使用
• 类名不能以数字开头
• 同一个标签可以使用多个类选择器，用空格隔开

<h3 class="classone classtwo">我是一个h3标题</h3>

ID选择器

针对某一个特定的标签来使用，只能使用一次。CSS中的ID选择器以 #来定义

<h2 id="mytitle">你好</h2>

#mytitle{
    width:800px;
}

提示

1. ID是唯一的
2. ID不能以数字开头
3. 与类选择器最大的区别是只能使用一次

合并选择器

语法：选择器1，选择器2...{} 作用：提取共同的样式，减少代码重复

.header,.footer{
    height: 300px;
}

选择器的优先级

在CSS中，选择器的优先级决定了当多个规则应用于同一个元素时，哪条规则最终会生效。优先级是由几个因素决定的，包括选择器的类型、选择器的数量以及它们的具体性（specificity）。理解CSS优先级有助于避免样式冲突，并确保页面样式按预期生效。

1. CSS选择器的优先级计算

优先级是基于选择器的组成部分来计算的，通常通过为每个选择器分配一个数值来表示优先级。优先级的计算规则如下：

• 内联样式：直接在元素的 style属性中定义的样式，优先级最高。其优先级被认为是 1000。
• ID选择器：ID选择器（例如 #id）优先级较高。每使用一个ID选择器，优先级增加 100。
• 类选择器、属性选择器、伪类选择器：类选择器（例如 .class）、属性选择器（例如 [type="text"]）和伪类选择器（例如 :hover）优先级相同，每使用一个增加 10。
• 元素选择器、伪元素选择器：元素选择器（例如 div）和伪元素选择器（例如 ::before）的优先级最低，每使用一个增加 1。

2. 优先级计算示例

通过几个例子来看一下优先级是如何计算的。

例1：不同类型的选择器优先级

/* 1. 内联样式 */
<p style="color: red;">Hello World</p>  /* 优先级 = 1000 */

/* 2. ID选择器 */
#main { color: blue; }  /* 优先级 = 100 */

/* 3. 类选择器 */
.container { color: green; }  /* 优先级 = 10 */

/* 4. 元素选择器 */
p { color: yellow; }  /* 优先级 = 1 */

对于 <p>元素的 color属性：

• 如果有内联样式，它将覆盖其他所有规则，因为它的优先级为1000。
• 如果没有内联样式，则会根据ID选择器、类选择器和元素选择器的优先级来决定使用哪个颜色。

例2：复合选择器

/* 1. 复合选择器：类 + 元素 */
div.container { color: purple; }  /* 优先级 = 10 + 1 = 11 */

/* 2. 复合选择器：ID + 元素 */
#main p { color: orange; }  /* 优先级 = 100 + 1 = 101 */

对于 #main p元素，#main p { color: orange; }将会生效，因为其优先级为101，比 div.container的优先级（11）高。

例3：相同选择器不同规则

#main { color: blue; }
#main { color: green; }

当有两个相同ID的选择器时，后面的规则会覆盖前面的规则，因为后面的规则具有相同优先级，但在样式表中出现得更晚。

3. 优先级计算规则

选择器的优先级是通过计算以下四个值来决定的：

1. 内联样式（style属性）：a（1000）
2. ID选择器：b（100）
3. 类选择器、属性选择器、伪类选择器：c（10）
4. 元素选择器、伪元素选择器：d（1）

所以，CSS优先级的计算规则是基于这四个值的组合。优先级的值通常是一个四元组，格式为 (a, b, c, d)。

4. 重要性（!important）

CSS中的 !important 可以使某个规则具有最高优先级，即使其他规则的优先级更高，也会被覆盖。它的作用是强制覆盖，但应谨慎使用，因为它会破坏正常的层叠规则，容易导致样式的维护困难。

p {
  color: red !important;
}

p {
  color: blue;
}

在这个例子中，color: red !important;会优先应用，而 color: blue;会被忽略。

5. 选择器优先级总结

选择器类型	优先级
内联样式 (style属性)	1000
ID选择器	100
类选择器、属性选择器、伪类选择器	10
元素选择器、伪元素选择器	1

• 优先级计算规则：按照从左到右，计算每个选择器的具体性。
• 使用 !important可以提升某条规则的优先级，强制覆盖其他规则。
• 避免过多依赖 !important，保持CSS层叠的合理性和可维护性。

掌握选择器优先级能够帮助你调试和优化CSS代码，避免样式冲突。

关系选择器

CSS中的关系选择器（Combinator Selectors）用于选择基于元素之间的关系的HTML元素。它们允许你根据元素在文档结构中的层次关系来应用样式。常见的关系选择器包括：

1. 后代选择器（空格）

• 语法：A B

• 作用：选择元素 A的所有后代元素 B（不论层级深度）。

  <div class="container">
    <p>这是段落1</p>
    <div>
      <p>这是段落2</p>
    </div>
  </div>
  

  .container p {
    color: blue;
  }
  

  解释：选择 class="container"内的所有 <p>元素（包括嵌套在内部 <div>中的段落）。因此，两个 <p>元素都会变成蓝色。

2. 子选择器（>）

• 语法：A > B

• 作用：选择元素 A的直接子元素 B（仅限第一层子元素）。

  <ul>
    <li>直接子元素1</li>
    <ul>
      <li>嵌套子元素</li>
    </ul>
    <li>直接子元素2</li>
  </ul>
  

  ul > li {
    color: green;
  }
  

  解释：仅选择第一层的 <li>元素（即“直接子元素1”和“直接子元素2”），而不选择嵌套的 <li>元素。

3. 相邻兄弟选择器（+）

• 语法：A + B

• 作用：选择紧跟在元素 A之后的相邻元素 B（同一级）。

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

  h2 + p {
    color: red;
  }
  

  解释：选择紧跟在 <h2>之后的第一个 <p>元素。因此，“段落1”会变成红色，而“段落2”不会受影响。

4. 通用兄弟选择器（~）

• 语法：A ~ B

• 作用：选择在元素 A之后的所有兄弟元素 B（不限于相邻）。

  <h3>小标题</h3>
  <p>段落A</p>
  <p>段落B</p>
  

  h3 ~ p {
    font-weight: bold;
  }
  

  解释：选择所有紧跟在 <h3>之后的兄弟 <p>元素。因此，“段落A”和“段落B”都会变成加粗字体。

5. 组合选择器示例

CSS关系选择器可以组合使用，以实现更复杂的选择逻辑。 选择某个容器内的特定结构

<div class="content">
  <div class="box">
    <span>文字1</span>
    <span>文字2</span>
  </div>
  <span>文字3</span>
</div>

.content > .box > span + span {
  color: purple;
}

解释：

• .content > .box > span + span 选择 .box内的第二个 <span>元素（即紧跟在第一个 <span>后的相邻兄弟元素）。
• 结果是“文字2”变成紫色，而“文字1”和“文字3”保持不变。

6. 优先级总结

• 后代选择器（空格）：较宽松，适用于嵌套结构。
• 子选择器（>）：更严格，仅限于直接子元素。
• 相邻兄弟选择器（+）：用于选择紧邻的兄弟元素。
• 通用兄弟选择器（~）：用于选择所有后续的兄弟元素（同级别）。

7. 性能注意事项

• 尽量避免过度依赖关系选择器，尤其是后代选择器，因为它可能导致浏览器性能下降，特别是在选择器嵌套层次过深时。
• 使用更具体的选择器（如ID、类选择器）可以提高样式应用的效率。