CSS选择器的新用法（推荐）

CSS选择器是用于选择HTML元素并应用样式的一种机制。在最新的CSS规范中，引入了一些新的选择器，这些选择器可以更方便地选择元素，提高开发效率。本攻略将详细介绍这些新的CSS选择器的用法。

1. 属性选择器

属性选择器允许根据元素的属性值来选择元素。在新的CSS规范中，属性选择器得到了增强，可以更灵活地选择元素。

示例1：选择具有特定属性值的元素

/* 选择所有具有data-type属性的元素 */
[data-type] {
  color: red;
}

上述示例中，使用属性选择器选择了所有具有data-type属性的元素，并将它们的文本颜色设置为红色。

示例2：选择具有特定属性值的元素（属性值以特定字符串开头）

/* 选择所有data-type属性值以\"image-\"开头的元素 */
[data-type^=\"image-\"] {
  border: 1px solid black;
}

上述示例中，使用属性选择器选择了所有data-type属性值以\"image-\"开头的元素，并给它们添加了一个黑色的边框。

2. 伪类选择器

伪类选择器用于选择元素的特定状态或位置。在新的CSS规范中，引入了一些新的伪类选择器，可以更方便地选择元素。

示例1：选择第一个子元素

/* 选择第一个子元素 */
li:first-child {
  font-weight: bold;
}

上述示例中，使用伪类选择器选择了每个li元素的第一个子元素，并将其字体加粗。

示例2：选择鼠标悬停的元素

/* 选择鼠标悬停的元素 */
a:hover {
  text-decoration: underline;
}

上述示例中，使用伪类选择器选择了鼠标悬停在a元素上的元素，并给它们添加了下划线。

结论

本攻略介绍了CSS选择器的新用法，包括属性选择器和伪类选择器。这些新的选择器可以更方便地选择元素，并提高开发效率。通过灵活运用这些选择器，你可以更好地控制和样式化你的网页元素。

希望本攻略对你有所帮助！