以上是一些常见的 HTML 标签及其在 CSS 中的应用方式。通过选择器和样式规则，可以对 HTML 中的各种标签进行样式化，从而实现网页的美化和布局。

（2）组合选择器

• 组合选择器是 CSS 中一种强大的选择器，它允许你选择同时满足多个条件的元素，从而更精确地定位目标元素。常见的组合选择器有以下几种：

1. 后代选择器（Descendant Selector）：

后代选择器使用空格分隔不同元素，表示选取某个元素的后代元素。例如：

div p {
  /* 选择 <div> 元素内部的所有 <p> 元素 */
  color: blue;
}

2. 子代选择器（Child Selector）：

子代选择器使用 > 符号，表示选取某个元素的直接子元素。例如：

ul > li {
  /* 选择 <ul> 元素下直接的 <li> 元素 */
  list-style-type: square;
}

3. 相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器使用 + 符号，表示选取紧接在另一个元素后的同级元素。例如：

h2 + p {
  /* 选择紧接在 <h2> 元素后的同级 <p> 元素 */
  font-weight: bold;
}

4. 通用兄弟选择器（General Sibling Selector）：

通用兄弟选择器使用 ~ 符号，表示选取与指定元素同级的所有元素。例如：

h2 ~ p {
  /* 选择 <h2> 元素后所有同级的 <p> 元素 */
  color: green;
}

这些组合选择器可以根据元素之间的关系、位置等条件来选择目标元素，使得 CSS 的选择更加灵活和精确。

（3）属性选择器

• 属性选择器是 CSS 中一种用于选择具有特定属性的元素的选择器。它允许你根据元素的属性值来选择目标元素，从而更精确地应用样式。常见的属性选择器有以下几种：

1. 存在选择器（Existence Selector）：

存在选择器使用方括号（[]）表示，选择具有指定属性的元素。例如：

input[type] {
  /* 选择所有具有 type 属性的 <input> 元素 */
  border: 1px solid #ccc;
}

2. 等值选择器（Equality Selector）：

等值选择器使用方括号和等号（[attr=value]）表示，选择具有指定属性值的元素。例如：

a[href="https://www.baidu.com"] {
  /* 选择 href 属性值为 https://www.baidu.com 的所有 <a> 元素 */
  color: blue;
}

3. 包含选择器（Containment Selector）：

包含选择器使用方括号和星号（[attr*=value]）表示，选择属性值包含指定字符串的元素。例如：

img[alt*="logo"] {
  /* 选择 alt 属性值中包含 "logo" 的所有 <img> 元素 */
  width: 100px;
}

4. 起始选择器（Beginning Selector）：

起始选择器使用方括号和插入符号（[attr^=value]）表示，选择属性值以指定字符串开头的元素。例如：

a[href^="https://"] {
  /* 选择 href 属性值以 "https://" 开头的所有 <a> 元素 */
  text-decoration: none;
}

5. 结尾选择器（Ending Selector）：

结尾选择器使用方括号和美元符号（[attr$=value]）表示，选择属性值以指定字符串结尾的元素。例如：

a[href$=".pdf"] {
  /* 选择 href 属性值以 ".pdf" 结尾的所有 <a> 元素 */
  font-weight: bold;
}

6. 精确值选择器（Exact Value Selector）：

精确值选择器使用方括号和等号（[attr=value]）表示，选择属性值与指定字符串完全相同的元素。例如：

input[type="checkbox"] {
  /* 选择 type 属性值为 "checkbox" 的所有 <input> 元素 */
  margin-right: 5px;
}

这些属性选择器可以根据元素的属性及其值来选择目标元素，使得 CSS 的选择更加灵活和精确。