当今数字化时代，属性选择器是前端开发中常用的一种选择元素的方式。其中，直接属性选择器和包含属性选择器是最常见的两种类型。直接属性选择器指定了一个具体的属性名和对应的属性值，用来选择具有该属性名和属

学习目标：

1. 理解CSS选择器的基本概念和作用
2. 熟悉常见的CSS选择器的语法和用法
3. 掌握不同类型的选择器的应用场景
4. 学会使用选择器来精确地选取HTML元素并应用样式

---

学习内容：

1. CSS选择器的基本概念和作用

   • 了解什么是CSS选择器，其作用和作用范围
   • 理解选择器的优先级和层叠性

2. 基本选择器

   • 元素选择器
   • 类选择器
   • ID选择器
   • 通配符选择器

3. 层级选择器

   • 后代选择器
   • 子元素选择器
   • 相邻兄弟选择器
   • 通用兄弟选择器

4. 属性选择器

   • 根据元素的属性值选择元素
   • 直接属性选择器
   • 包含属性选择器
   • 开始属性选择器
   • 结束属性选择器

5. 伪类选择器

   • 链接伪类选择器
   • 动态伪类选择器
   • UI元素状态伪类选择器
   • 结构伪类选择器

6. 伪元素选择器

   • ::before
   • ::after
   • ::first-line
   • ::first-letter

7. 结合使用选择器

   • 多个选择器的结合使用
   • 选择器的优先级和权重

---

学习时间：

• 周一至周五晚上 7 点—晚上9点
• 周六上午 9 点-上午 11 点
• 周日下午 3 点-下午 6 点

---

学习产出：

1. CSS选择器的基本概念和作用

   • 了解什么是CSS选择器，其作用和作用范围 理解选择器的优先级和层叠性

CSS选择器是一种用于选择HTML元素的模式，通过选择器，我们可以根据不同的条件选取想要样式化的元素。选择器的作用是为了实现对特定元素或元素组的样式控制。

选择器的作用范围是在CSS样式表中，通过将选择器与相关的样式规则关联起来，从而实现对HTML文档的样式化。

选择器的优先级决定了当有多个样式规则应用于同一元素时，哪个规则将被应用。优先级是根据不同选择器的权重来确定的。权重由四个不同的因素组成：内联样式（最高优先级）> ID选择器 > 类选择器、属性选择器和伪类选择器 > 元素选择器（最低优先级）。例如，ID选择器的权重高于类选择器和元素选择器，因此如果两个样式规则都应用于同一个元素，ID选择器的样式将覆盖类选择器和元素选择器的样式。

层叠性是指当多个样式规则应用于同一元素时，它们的样式如何进行叠加和组合。CSS选择器的层叠性是基于选择器的特定性和引用顺序来确定的。如果多个选择器选择了同一元素并应用了相同的样式属性，则后面的样式规则将覆盖前面的规则。但是，当选择器的特定性相同时，后面的样式规则仍然可以覆盖前面的规则。

通过理解选择器的优先级和层叠性，我们可以更好地掌握CSS样式的应用，确保样式的正确应用和覆盖。

1. 基本选择器

   • 元素选择器

元素选择器是CSS中最基本的选择器之一，它通过HTML元素的标签名称来选择需要样式化的元素。以下是一些常见的元素选择器的示例：

1. div选择器：

div {
  color: blue;
}

上面的示例将会把所有的<div>元素的文本颜色设置为蓝色。

1. p选择器：

p {
  font-size: 14px;
}

上面的示例将会把所有的<p>元素的字体大小设置为14像素。

1. a选择器：

a {
  text-decoration: none;
}

上面的示例将会去掉所有的<a>元素的下划线，即取消超链接的默认样式。

1. h1选择器：

h1 {
  text-align: center;
}

上面的示例将会将所有的<h1>元素的文本居中对齐。

1. ul选择器：

ul {
  list-style-type: none;
}

上面的示例将会去掉所有的<ul>元素的默认列表样式。

通过元素选择器，我们可以选择并样式化指定标签名称的所有元素，从而实现对整个页面的样式控制。

1. • 类选择器

类选择器是CSS中广泛使用的选择器之一，它通过给HTML元素添加class属性，并使用该类名进行选择器匹配。以下是一些常见的类选择器的示例：

1. .red选择器：

.red {
  color: red;
}

上面的示例将会把所有使用了class为"red"的元素的文本颜色设置为红色。

1. .bold选择器：

.bold {
  font-weight: bold;
}

上面的示例将会把所有使用了class为"bold"的元素的文字加粗。

1. .center选择器：

.center {
  text-align: center;
}

上面的示例将会把所有使用了class为"center"的元素的文本居中对齐。

1. .highlight选择器：

.highlight {
  background-color: yellow;
}

上面的示例将会把所有使用了class为"highlight"的元素的背景颜色设置为黄色。

通过类选择器，我们可以给HTML元素添加自定义的类名，然后通过该类名来选择并样式化特定的元素，从而实现对页面不同部分的有针对性的样式控制。

1. • ID选择器

ID选择器是CSS中另一种常用的选择器，它通过给HTML元素添加id属性，并使用该id进行选择器匹配。与类选择器相比，ID选择器具有更高的优先级，可以用来选择唯一的元素。以下是一些ID选择器的示例：

1. #header选择器：

#header {
  background-color: blue;
  color: white;
}

上面的示例将会把id为"header"的元素的背景颜色设置为蓝色，文本颜色设置为白色。

1. #logo选择器：

#logo {
  width: 100px;
  height: 100px;
}

上面的示例将会把id为"logo"的元素的宽度和高度设置为100像素。

1. #navbar选择器：

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

上面的示例将会把id为"navbar"的元素的样式设置为无序列表样式的导航栏。

通过ID选择器，我们可以选择具有特定id的唯一元素，并对其进行样式化或其他操作。但需要注意的是，每个id值在HTML文档中必须是唯一的，否则会导致选择器匹配出现问题。

1. • 通配符选择器

 

通配符选择器 (*) 是一种CSS选择器，它匹配HTML文档中的所有元素。它的使用方式是使用一个星号来表示。

以下是一些通配符选择器的示例：

1. 设置页面中所有元素的边框为1像素红色：

* {
  border: 1px solid red;
}

上面的示例将会把页面中所有元素的边框样式设置为1像素的红色边框。

1. 设置页面中所有元素的文本颜色为蓝色：

* {
  color: blue;
}

上面的示例将会把页面中所有元素的文本颜色设置为蓝色。

通配符选择器可以用来对整个页面的所有元素进行统一的样式化或操作。但需要注意的是，通配符选择器具有较低的优先级，因此在使用时需要慎重考虑，以免影响到其他具有更高优先级的选择器。

1. 层级选择器

   • 后代选择器

后代选择器（descendant selector）用于选择元素的后代元素。它使用空格将两个选择器进行连接。

以下是一些后代选择器的示例：

1. 选择所有段落（p）元素中的 em 元素：

p em {
  color: red;
}

上面的示例将会选择所有在段落元素（p）内部的 em 元素，并将其文本颜色设置为红色。

1. 选择父级元素为 div 的所有子级元素中的 span 元素：

div > span {
  font-weight: bold;
}

上面的示例将会选择所有父级元素为 div 的子级元素中的 span 元素，并将它们的字体加粗。

后代选择器可以用来选择特定元素在其他元素内部的子元素，可以根据需要进行嵌套使用，以实现更复杂的选择效果。

1. • 子元素选择器

子元素选择器（child selector）用于选择一个元素的直接子元素。它使用 ">" 符号将父元素和子元素进行连接。

以下是一些子元素选择器的示例：

1. 选择所有父级元素为 div 的直接子级元素中的 p 元素：

div > p {
  color: blue;
}

上面的示例将会选择所有父级元素为 div 的直接子级元素中的 p 元素，并将其文本颜色设置为蓝色。

1. 选择父级元素为 ul 的直接子级元素中的 li 元素：

ul > li {
  list-style-type: none;
}

上面的示例将会选择所有父级元素为 ul 的直接子级元素中的 li 元素，并移除它们的默认列表样式。

子元素选择器只会选择父元素的直接子级元素，不包括更深层次的后代元素。这使得子元素选择器非常有用，可以针对特定的层次结构或特定的元素进行样式设置。

1. • 相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）是CSS选择器中的一种，用于选择与指定元素相邻的下一个兄弟元素。

语法：

element + element

其中，第一个element是指定元素，+符号表示选择下一个相邻的兄弟元素，第二个element表示被选择的相邻兄弟元素。

示例：

HTML代码：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>草莓</li>
</ul>

CSS代码：

li + li {
  color: red;
}

上面的CSS代码表示选择相邻的li元素，并将它们的文本颜色设为红色。在上面的示例中，只有后面三个li元素会被选择，因为它们是相邻的兄弟元素。第一个li元素不会被选择，因为它没有相邻的兄弟元素。

需要注意的是，相邻兄弟选择器只会选择下一个相邻的兄弟元素，而不会选择前面的相邻兄弟元素。如果需要选择前面的相邻兄弟元素，可以使用通用兄弟选择器（General Sibling Selector）(~)。

1. • 通用兄弟选择器

通用兄弟选择器（General Sibling Selector）是CSS选择器中的一种，用于选择与指定元素具有相同父元素的所有兄弟元素。

通用兄弟选择器使用波浪号 (~) 表示。

语法：

element ~ element

其中，第一个element是指定元素，~符号表示选择具有相同父元素的所有兄弟元素，第二个element表示被选择的兄弟元素。

示例：

HTML代码：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>草莓</li>
</ul>

CSS代码：

li ~ li {
  color: red;
}

上面的CSS代码表示选择具有相同父元素的所有li元素，并将它们的文本颜色设为红色。在上面的示例中，所有的li元素都会被选择，因为它们都具有相同的父元素ul。

需要注意的是，通用兄弟选择器会选择所有满足条件的兄弟元素，不论它们出现在指定元素的前面还是后面。而相邻兄弟选择器 (+) 只选择下一个相邻的兄弟元素。

通用兄弟选择器的使用可以给在同一个父元素下的兄弟元素应用相同的样式，提供了更灵活的选择方式。

 

1. 属性选择器

   • 根据元素的属性值选择元素

可以使用属性选择器（Attribute Selector）来根据元素的属性值选择元素。属性选择器可以根据属性的存在、具体值、以及属性值的匹配方式来选择元素。

属性存在选择器：

具体值选择器：

示例：

HTML代码：

<p class="green">这是一个绿色的段落</p>
<p class="blue">这是一个蓝色的段落</p>
<p class="green blue">这是一个绿色和蓝色的段落</p>
<a href="https://www.example.com">链接</a>
<img src="image.jpg" alt="图片">

CSS代码：

p[class="green"] {
  color: green;
}

p[class~="blue"] {
  color: blue;
}

a[href^="https"] {
  text-decoration: underline;
}

img[alt*="图片"] {
  border: 1px solid black;
}

上述示例中，分别使用了属性存在选择器、具体值选择器、包含选择器、开头选择器和包含选择器来选择元素。根据选择器的匹配规则，相应的样式将应用于选中的元素。

1. • 直接属性选择器

直接属性选择器是CSS中一种用于选择具有特定属性值的元素的选择器。它使用以下语法：

[element="value"] { style properties }

这里的[element]表示一个元素，"value"表示该元素对应属性的值。只有具有与指定值相匹配的属性值的元素才会被选择。

举个例子，如果我们希望选择所有class属性值为"example"的元素，可以使用以下选择器：

[class="example"] { style properties }

这个选择器将会选择具有class属性值为"example"的所有元素，然后可以为它们添加样式属性。

请注意，直接属性选择器只会匹配完全等于指定值的属性值。如果要选择属性值以指定值开头、包含指定值、或者以指定值结尾的元素，可以使用其他高级属性选择器，如属性值前缀选择器、属性值包含选择器或属性值后缀选择器。

以上是直接属性选择器的基本用法。您可以根据实际需求来使用不同的属性选择器来选择具有特定属性值的元素。

1. • 包含属性选择器

包含属性选择器是CSS中一种用于选择具有指定属性且属性值包含某个特定字符串的元素的选择器。它使用以下语法：

[element*="value"] { style properties }

这里的[element]表示一个元素，"value"表示要包含在属性值中的字符串。只有具有包含指定字符串的属性值的元素才会被选择。

举个例子，如果我们希望选择所有class属性值包含"example"的元素，可以使用以下选择器：

[class*="example"] { style properties }

这个选择器将会选择具有class属性值中包含"example"的所有元素，然后可以为它们添加样式属性。

请注意，包含属性选择器是对属性值进行部分匹配。如果要选择属性值以指定字符串开头或以指定字符串结尾的元素，可以使用其他高级属性选择器，如属性值前缀选择器或属性值后缀选择器。

以上是包含属性选择器的基本用法。您可以根据实际需求来使用不同的属性选择器来选择具有特定属性值的元素。

1. • 开始属性选择器

开始属性选择器用于选择具有以指定字符串开头的属性值的元素。它使用以下语法：

[element^="value"] { style properties }

这里的[element]表示一个元素，"value"表示要匹配属性值开头的字符串。只有具有以指定字符串开头的属性值的元素才会被选择。

举个例子，如果我们希望选择所有class属性值以"example"开头的元素，可以使用以下选择器：

[class^="example"] { style properties }

这个选择器将会选择具有class属性值以"example"开头的所有元素，然后可以为它们添加样式属性。

以下是几个示例：

1. 选择所有id属性值以"menu"开头的元素： [id^="menu"] { style properties }

2. 选择所有src属性值以"https://"开头的图片元素： [src^="https://"] { style properties }

3. 选择所有href属性值以"#"开头的链接元素： [href^="#"] { style properties }

以上是开始属性选择器的基本用法。您可以根据实际需求来使用不同的属性选择器来选择具有特定属性值的元素。

1. • 结束属性选择器

结束属性选择器用于选择具有以指定字符串结尾的属性值的元素。它使用以下语法：

[element$="value"] { style properties }

这里的[element]表示一个元素，"value"表示要匹配属性值结尾的字符串。只有具有以指定字符串结尾的属性值的元素才会被选择。

举个例子，如果我们希望选择所有src属性值以".jpg"结尾的图片元素，可以使用以下选择器：

[src$=".jpg"] { style properties }

这个选择器将会选择具有src属性值以".jpg"结尾的所有图片元素，然后可以为它们添加样式属性。

以下是几个示例：

1. 选择所有href属性值以".pdf"结尾的链接元素： [href$=".pdf"] { style properties }

2. 选择所有class属性值以"-active"结尾的元素： [class$="-active"] { style properties }

3. 选择所有id属性值以"-container"结尾的元素： [id$="-container"] { style properties }

以上是结束属性选择器的基本用法。根据具体需要，您可以使用不同的属性选择器来选择具有特定属性值结尾的元素。