掌握 CSS 五类核心选择器的语法与使用场景
理解基本选择器、组合选择器、属性选择器的区别与联系
学会运用伪类和伪元素实现动态交互与内容美化
能够根据实际开发需求精准定位 HTML 元素并应用样式
基本选择器是最常用的一类 CSS 选择器，用于通过 HTML 标签名、类名、ID 或通配符来选取元素。
1. 通配选择器（*）
选取页面中所有元素，统一应用相同样式。
<html>
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>标题文本</h1>
<p>段落文本</p>
</body>
</html>2. 元素选择器
选取特定类型的 HTML 元素，如所有 <p> 段落。
<html>
<head>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>此段落字体大小为 16 像素。</p>
</body>
</html>3. 类选择器（.）
为具有指定 class 属性的元素应用样式。
<html>
<head>
<style>
.button {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button class="button">点击我！</button>
</body>
</html>4. ID 选择器（#）
为具有唯一 id 的单个元素设置样式。
<html>
<head>
<style>
#header {
background-color: gray;
}
</style>
</head>
<body>
<div id="header">这是页眉区域。</div>
</body>
</html>组合选择器通过描述元素之间的结构关系，实现更精确的样式控制。
1. 后代选择器（空格）
选取某元素内部的所有后代元素。
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>此段落在 div 内，文字为红色。</p>
</div>
</body>
</html>2. 子元素选择器（>）
仅选取直接子元素，不包括嵌套更深的后代。
<html>
<head>
<style>
div > p {
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<p>这是直接子元素，有左外边距。</p>
<div>
<p>这不是直接子元素，无外边距。</p>
</div>
</div>
</body>
</html>3. 相邻兄弟选择器（+）
选取紧接在另一元素后的同级元素。
<html>
<head>
<style>
h1 + p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>这是一个标题。</h1>
<p>紧跟标题的段落加粗显示。</p>
<p>此段落不会加粗。</p>
</body>
</html>4. 通用兄弟选择器（~）
选取某元素之后的所有同级兄弟元素。
<html>
<head>
<style>
h1 ~ p {
font-style: italic;
}
</style>
</head>
<body>
<h1>这是一个标题。</h1>
<p>作为标题的兄弟，此段落斜体。</p>
<p>这也是兄弟，同样斜体。</p>
</body>
</html>根据 HTML 元素的属性及其值进行筛选。
1. 属性存在选择器
选取包含指定属性的元素。
<html>
<head>
<style>
input[type] {
border: 2px solid black;
}
</style>
</head>
<body>
<input type="text" placeholder="文本输入框">
<input type="number" placeholder="数字输入框">
</body>
</html>2. 属性值精确匹配
选取属性值完全匹配的元素。
<html>
<head>
<style>
input[type="text"] {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" placeholder="文本输入框">
<input type="password" placeholder="密码输入框">
</body>
</html>3. 前缀匹配（^=）
选取属性值以指定字符串开头的元素。
<html>
<head>
<style>
a[href^="https"] {
color: green;
}
</style>
</head>
<body>
<a href="https://example.com/">安全链接</a>
<a href="http://example.com/">非安全链接</a>
</body>
</html>4. 包含匹配（*=）
选取属性值包含指定子串的元素。
<html>
<head>
<style>
a[href*="example"] {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://example.com/">包含 'example'，带下划线</a>
<a href="https://otherlink.com">不包含，无下划线</a>
</body>
</html>用于选取元素的特殊状态，常用于交互反馈。
1. :hover
鼠标悬停时触发。
<html>
<head>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="https://example.com/">悬停查看效果</a>
</body>
</html>2. :focus
元素获得焦点时（如输入框被点击）。
<html>
<head>
<style>
input:focus {
outline: 3px solid red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>3. :first-child
选取父元素的第一个子元素。
<html>
<head>
<style>
p:first-child {
color: brown;
}
</style>
</head>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
</body>
</html>4. :last-child
选取父元素的最后一个子元素。
<html>
<head>
<style>
p:last-child {
color: green;
}
</style>
</head>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
</body>
</html>5. :not()
排除匹配特定条件的元素。
<html>
<head>
<style>
p:not(.one) {
color: blue;
}
</style>
</head>
<body>
<div>
<p class="one">Hello1</p>
<p class="two">Hello2</p>
</div>
</body>
</html>用于选取并样式化元素的特定部分，注意使用 双冒号（::）语法。
1. ::before
在元素内容前插入内容。
<html>
<head>
<style>
h1::before {
content: "★ ";
}
</style>
</head>
<body>
<h1 tabindex="0">欢迎来到技术社区</h1>
</body>
</html>2. ::after
在元素内容后插入内容。
<html>
<head>
<style>
h1::after {
content: " ☀";
color: orangered;
}
</style>
</head>
<body>
<h1 tabindex="0">欢迎来到技术社区</h1>
</body>
</html>3. ::first-line
样式化块级元素的第一行文本。
<html>
<head>
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<p>欢迎来到技术社区<br>
你好，开发者！</p>
</body>
</html>4. ::first-letter
样式化段落的首字母。
<html>
<head>
<style>
p::first-letter {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<p>欢迎来到技术社区</p>
</body>
</html>5. ::placeholder
样式化输入框的占位文本（注意：font-size 单位应为 px）。
<html>
<head>
<style>
input::placeholder {
font-size: 20px;
font-family: sans-serif;
font-weight: 900;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入您的姓名">
</body>
</html>为什么在实际项目中应尽量避免过度使用通配选择器（*）？它可能带来哪些性能或维护问题？
请解释 div p 和 div > p 在以下 HTML 结构中的选择差异：
<div>
<p>直接子元素</p>
<section><p>嵌套子元素</p></section>
</div>如何使用属性选择器为所有以 .pdf 结尾的下载链接添加一个 PDF 图标背景？请写出对应 CSS 规则。