复合选择器
后代选择器（空格分隔）
概念
后代选择器用于选择一个元素内部的所有指定后代元素，这些后代元素可以是子元素、孙元素或者更深层次嵌套的元素。它基于元素在文档结构中的嵌套关系来选择。
祖先元素 后代元素，中间用空格隔开。例如，"div p"
html
<div>
<p>这是一个段落。</p>
<section>
<p>这是嵌套在section里的段落。</p>
</section>
</div>• CSS样式：
css
div p {
color: blue;
font - size: 16px;
}•无论是直接在内部的元素，还是嵌套在内部中的元素，都会应用蓝色字体、16px字号的样式。这是因为后代选择器会选择所有符合条件的后代元素。
用途及优势
当你想要对一个容器元素内的特定类型的所有后代元素应用相同的样式时非常方便。比如，在一个网页布局中，对一个文章区域（可能是一个）内的所有段落（）、列表项（）等元素统一设置字体、颜色等基本样式。不必为每个深层次嵌套的元素单独设置样式，只要它们符合后代选择器的规则，就会自动继承样式，使得样式代码更加简洁、高效。
子选择器（> 分隔）
概念
子选择器只选择作为指定元素的直接子元素的元素。它更具针对性，只关注直接的父子关系，而不像后代选择器那样会选择所有嵌套的后代。
父元素>子元素。例如，"div > p"。
html
<div>
<p>这是一个直接子段落。</p>
<section>
<p>这是嵌套在section里的段落。</p>
</section>
</div>• CSS样式：
css
div > p {
background - color: yellow;
}只有直接作为元素子元素的会有黄色背景，而嵌套在（尽管在内部）中的元素不会应用这个背景色。这突出了子选择器只选择直接子元素的特点。
用途及优势
只想对一个元素的直接后代应用样式，而不希望样式影响到更深层次的嵌套元素时，子选择器是理想的选择。例如，在一个导航栏（）的（无序列表）元素中，你可能只想设置直接子元素（列表项）的样式，如间距、边框等，而不希望这些样式应用到嵌套在中的其他元素。在复杂的文档结构中，通过使用子选择器可以避免样式的意外继承和冲突。它明确了样式的应用范围仅限于直接子元素，使得样式的控制更加精确。
伪类选择器
:hover伪类
:hover伪类用于定义当鼠标指针悬停在元素上时的样式。它可以为用户提供视觉反馈，增强用户与页面元素之间的交互性。
元素**:hover**。例如，a:hover（用于超链接）或button:hover（用于按钮）。
css
a {
color: blue;
text - decoration: none;
}
a:hover {
color: red;
text - decoration: underline;
}正常情况下超链接（）的颜色是蓝色且没有下划线。当鼠标悬停在超链接上时，颜色变为红色并且会出现下划线，这种变化为用户提供了清晰的视觉提示，表明该链接是可交互的。
css
<button type="button">点击我</button>
button {
background - color: gray;
border: none;
color: white;
padding: 10px 20px;
}
button:hover {
background - color: darkgray;
}• 这里正常的按钮有灰色背景、白色文字和一定的内边距。当鼠标悬停时，按钮的背景色会变深，为用户提供了按钮被激活的视觉暗示。
用途及优势
是创建用户友好界面的重要工具。在网页设计中，几乎所有可交互的元素（如菜单、按钮、卡片等）都可以使用:hover伪类来提供悬停效果，让用户清楚地知道哪些元素可以进行操作。通过改变元素的颜色、大小、阴影等样式属性，为用户提供即时的视觉反馈，提高用户体验和页面的易用性。
:active伪类
:active伪类用于定义元素在被激活时（通常是鼠标按下时）的样式。它可以模拟元素被点击或按下的瞬间状态。
**元素:active。**例如，input:active（用于输入框）或a:active（用于超链接）。
css
a {
color: blue;
text - decoration: none;
}
a:active {
color: green;
text - decoration: underline;
}当我们按下超链接（鼠标左键按下）时，颜色会变为绿色并且出现下划线，松开鼠标后，样式会恢复到正常状态或者:hover状态（如果鼠标仍然悬停）。
css
<input type="text" placeholder="请输入内容">
input {
border: 1px solid gray;
padding: 5px;
}
input:active {
border - color: blue;
}这里输入框在正常状态下有灰色边框，当用户点击输入框（激活状态）时，边框颜色变为蓝色，提供了一种输入框被激活的视觉提示。
用途及优势
我们可以明确感知到元素正在被操作，增强了操作的反馈感。对于按钮、链接等元素，:active状态可以让用户知道他们的点击操作已经被接收。在移动设备上也同样重要，模拟触摸按下的瞬间状态，使页面在触摸交互时也能提供清晰的反馈。
:first - child伪类
:first - child伪类用于选择作为其父元素的第一个子元素的元素。它是基于元素在父元素中的位置来选择的。
**元素:first - child。**例如，li:first - child（用于选择列表中的第一个列表项）。
html
<ul>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ul>
li:first - child {
font - weight: bold;
}在这个例子中，只有第一个列表项（）会被设置为粗体。因为:first - child伪类选择了作为元素的第一个子元素的。
用途及优势
在列表、表格行或其他包含多个子元素的结构中，可以用于突出显示第一个元素。例如，在一个新闻列表中，让第一个新闻标题有不同的样式（如加粗、加大字号等）来吸引用户的注意力。也与其他选择器结合使用，可以实现更复杂的样式分层。比如，先使用类选择器对所有列表项应用基本样式，然后使用:first - child伪类对第一个列表项添加额外的特殊样式。