0
CSS 选择器：从初学者到专家的完整指南
                           
天天向上
发布： 2024-12-12 23:18:03
原创
900 人浏览过

CSS 选择器是前端开发中的基础和核心，用于选择 HTML 元素并应用样式。以下指南从基础到高级逐步讲解 CSS 选择器，帮助你全面掌握这一技能。

一、基础选择器（初学者阶段）

1. 通用选择器（*）

匹配所有元素。

* {
  margin: 0;
  padding: 0;
}

2. 类型选择器（标签选择器）

选择特定的 HTML 元素。

p {
  color: blue;
}

3. 类选择器（.classname）

选择具有特定类的元素。

.card {
  background-color: #f9f9f9;
}

4. ID 选择器（#id）

选择具有特定 ID 的元素（尽量少用）。

#header {
  height: 60px;
}

5. 分组选择器（,）

为多个元素应用相同样式。

h1, h2, h3 {
  font-weight: bold;
}

二、组合选择器（进阶阶段）

1. 后代选择器（A B）

选择 A 元素内的所有 B 元素。

div p {
  color: gray;
}

2. 子选择器（A > B）

选择 A 元素的直接子元素 B。

ul > li {
  list-style: none;
}

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

选择紧接在 A 元素后的兄弟元素 B。

h1 + p {
  font-size: 14px;
}

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

选择 A 元素后所有兄弟 B 元素。

h1 ~ p {
  color: #888;
}

三、属性选择器（高效筛选）

1. 基本属性选择器

  • [attr]：具有某属性的元素。
  [disabled] {
    opacity: 0.5;
  }

2. 基于属性值的选择器

  • [attr="value"]：属性值完全匹配。
  input[type="text"] {
    border: 1px solid #ccc;
  }
  • [attr~="value"]：属性值包含指定单词。
  [class~="button"] {
    padding: 10px;
  }
  • [attr|="value"]：属性值以指定值开头，后可跟连字符。
  [lang|="en"] {
    font-style: italic;
  }
  • [attr^="value"]：属性值以指定值开头。
  a[href^="https"] {
    color: green;
  }
  • [attr$="value"]：属性值以指定值结尾。
  img[src$=".jpg"] {
    border-radius: 5px;
  }
  • [attr*="value"]：属性值包含指定值。
  a[href*="example"] {
    text-decoration: underline;
  }

四、伪类选择器（动态样式）

1. 常见动态伪类

  • :hover：鼠标悬停时触发。
  button:hover {
    background-color: #ddd;
  }
  • :focus：元素获取焦点时触发。
  input:focus {
    outline: 2px solid blue;
  }
  • :active：元素被激活时触发。
  a:active {
    color: red;
  }

2. 结构性伪类

  • :nth-child(n)：选择父元素中第 n 个子元素。
  li:nth-child(2) {
    color: red;
  }
  • :nth-last-child(n)：选择倒数第 n 个子元素。
  • :first-child / :last-child：第一个/最后一个子元素。
  • :only-child：唯一子元素。

3. 目标伪类

  • :target：匹配当前 URL 指定的目标元素。
  #section1:target {
    background-color: yellow;
  }

五、伪元素（高级美化）

1. ::before 和 ::after

用于在元素前后插入内容。

h1::before {
  content: "★";
  color: gold;
}

2. ::first-letter 和 ::first-line

为段落首字母或首行设置样式。

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

六、优先级与层叠规则

1. 选择器优先级

  • 内联样式：style=""（优先级最高）
  • ID 选择器：#id
  • 类、属性选择器、伪类：.class、[attr]、:hover
  • 元素选择器和伪元素：p、::before

2. 权重计算

优先级由权重决定，规则如下：

  • 内联样式：1000
  • ID 选择器：100
  • 类选择器：10
  • 元素选择器：1

例如：

/* 权重：10 */
.class {
  color: red;
}
/* 权重：100 */
#id {
  color: blue;
}

最终 #id 样式会生效。

七、组合与层叠（专家级应用）

1. 组合选择器

将选择器组合以实现精确匹配：

div#header > ul.menu li:first-child a {
  color: #333;
}

2. 层叠（Cascade）

CSS 样式的层叠性允许多条规则应用于同一元素，根据优先级和权重决定最终样式。

3. 逻辑选择器

使用伪类和逻辑操作实现复杂匹配：

  • :is()：匹配多个选择器之一。
  :is(h1, h2, h3) {
    margin: 0;
  }
  • :not()：排除特定选择器。
  div:not(.active) {
    opacity: 0.5;
  }

通过系统掌握上述选择器，你可以在项目中高效地筛选、匹配元素并控制样式。如果需要更深入的实践和案例分析，可以继续交流！

CSS 选择器：从初学者到专家的完整指南

CSS 选择器是前端开发中的基础和核心，用于选择 HTML 元素并应用样式。以下指南从基础到高级逐步讲解 CSS 选择器，帮助你全面掌握这一技能。

一、基础选择器（初学者阶段）

1. 通用选择器（*）

匹配所有元素。

* {
  margin: 0;
  padding: 0;
}

2. 类型选择器（标签选择器）

选择特定的 HTML 元素。

p {
  color: blue;
}

3. 类选择器（.classname）

选择具有特定类的元素。

.card {
  background-color: #f9f9f9;
}

4. ID 选择器（#id）

选择具有特定 ID 的元素（尽量少用）。

#header {
  height: 60px;
}

5. 分组选择器（,）

为多个元素应用相同样式。

h1, h2, h3 {
  font-weight: bold;
}

二、组合选择器（进阶阶段）

1. 后代选择器（A B）

选择 A 元素内的所有 B 元素。

div p {
  color: gray;
}

2. 子选择器（A > B）

选择 A 元素的直接子元素 B。

ul > li {
  list-style: none;
}

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

选择紧接在 A 元素后的兄弟元素 B。

h1 + p {
  font-size: 14px;
}

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

选择 A 元素后所有兄弟 B 元素。

h1 ~ p {
  color: #888;
}

三、属性选择器（高效筛选）

1. 基本属性选择器

  • [attr]：具有某属性的元素。
  [disabled] {
    opacity: 0.5;
  }

2. 基于属性值的选择器

  • [attr="value"]：属性值完全匹配。
  input[type="text"] {
    border: 1px solid #ccc;
  }
  • [attr~="value"]：属性值包含指定单词。
  [class~="button"] {
    padding: 10px;
  }
  • [attr|="value"]：属性值以指定值开头，后可跟连字符。
  [lang|="en"] {
    font-style: italic;
  }
  • [attr^="value"]：属性值以指定值开头。
  a[href^="https"] {
    color: green;
  }
  • [attr$="value"]：属性值以指定值结尾。
  img[src$=".jpg"] {
    border-radius: 5px;
  }
  • [attr*="value"]：属性值包含指定值。
  a[href*="example"] {
    text-decoration: underline;
  }

四、伪类选择器（动态样式）

1. 常见动态伪类

  • :hover：鼠标悬停时触发。
  button:hover {
    background-color: #ddd;
  }
  • :focus：元素获取焦点时触发。
  input:focus {
    outline: 2px solid blue;
  }
  • :active：元素被激活时触发。
  a:active {
    color: red;
  }

2. 结构性伪类

  • :nth-child(n)：选择父元素中第 n 个子元素。
  li:nth-child(2) {
    color: red;
  }
  • :nth-last-child(n)：选择倒数第 n 个子元素。
  • :first-child / :last-child：第一个/最后一个子元素。
  • :only-child：唯一子元素。

3. 目标伪类

  • :target：匹配当前 URL 指定的目标元素。
  #section1:target {
    background-color: yellow;
  }

五、伪元素（高级美化）

1. ::before 和 ::after

用于在元素前后插入内容。

h1::before {
  content: "★";
  color: gold;
}

2. ::first-letter 和 ::first-line

为段落首字母或首行设置样式。

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

六、优先级与层叠规则

1. 选择器优先级

  • 内联样式：style=""（优先级最高）
  • ID 选择器：#id
  • 类、属性选择器、伪类：.class、[attr]、:hover
  • 元素选择器和伪元素：p、::before

2. 权重计算

优先级由权重决定，规则如下：

  • 内联样式：1000
  • ID 选择器：100
  • 类选择器：10
  • 元素选择器：1

例如：

/* 权重：10 */
.class {
  color: red;
}
/* 权重：100 */
#id {
  color: blue;
}

最终 #id 样式会生效。

七、组合与层叠（专家级应用）

1. 组合选择器

将选择器组合以实现精确匹配：

div#header > ul.menu li:first-child a {
  color: #333;
}

2. 层叠（Cascade）

CSS 样式的层叠性允许多条规则应用于同一元素，根据优先级和权重决定最终样式。

3. 逻辑选择器

使用伪类和逻辑操作实现复杂匹配：

  • :is()：匹配多个选择器之一。
  :is(h1, h2, h3) {
    margin: 0;
  }
  • :not()：排除特定选择器。
  div:not(.active) {
    opacity: 0.5;
  }

通过系统掌握上述选择器，你可以在项目中高效地筛选、匹配元素并控制样式。

以上为如何有效掌握css选择器的详细介绍，更多信息请关注其他相关文章！

发表回复 0

Your email address will not be published. Required fields are marked *