小白巧用这些选择器，开发网页更加高效

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

CSS3 引入了许多新的选择器，这些选择器增强了样式控制的能力，使得选择元素更加精确和灵活，今天瑶琴带大家来学习或复习这些选择器。

以下是一些常见的CSS3新增的选择器：

1.属性选择器（Attribute Selectors）：根据元素的属性值选择元素。

[attribute]：选择具有指定属性的元素。

[attribute="value"]：选择具有指定属性和值的元素。

[attribute^="value"]：选择属性值以指定值开头的元素。

[attribute$="value"]：选择属性值以指定值结尾的元素。

*[attribute="value"]**：选择属性值中包含指定值的元素。

/* 选择所有具有"title"属性的链接元素 */
a[title] {
  color: blue;
}

/* 选择所有href属性以"https://"开头的链接元素 */
a[href^="https://"] {
  color: green;
}

/* 选择所有class属性包含"btn"的按钮元素 */
button[class*="btn"] {
  background-color:#f0f0f0;
}

2.子元素选择器（:nth-child）：选择元素的子元素。

:nth-child(n)：选择父元素的第n个子元素。

:nth-last-child(n)：选择父元素的倒数第n个子元素。

:first-child：选择父元素的第一个子元素。

:last-child：选择父元素的最后一个子元素

/* 选择父元素的第二个子元素 */
div:nth-child(2) {
  font-weight: bold;
}

/* 选择父元素的最后一个子元素 */
ul li:last-child {
  font-style: italic;
}

3.相邻兄弟选择器（Adjacent Sibling Selector）：选择紧接在另一个元素之后的元素。

+：选择紧跟在指定元素之后的同级元素。

/* 选择每个h2元素后的第一个p元素 */
h2 + p {
  margin-top: 10px;
}

4.通用选择器（Universal Selector）：选择文档中的所有元素。

*：选择所有元素。

/* 选择文档中的所有元素并添加边框 */
* {
  border: 1px solid #ccc;
}

5.目标伪类选择器（:target）：选择当前活动的目标元素。

:target：选择具有与文档URL中片段标识符匹配的id的元素。

/* 选择具有与URL中片段标识符匹配的id的元素 */
#section1:target {
  background-color: yellow;
}

6.空元素选择器（:empty）：选择没有任何子元素或文本内容的元素。

:empty：选择空元素。

/* 选择没有子元素或文本内容的空段落 */
p:empty {
  display: none;
}

新的 CSS3 选择器使得样式选择更加灵活，避免了之前只能用层层嵌套才能选择到内层元素，这块的内容需要每个初学者都要了解和会使用。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。