组合选择器的使用技巧

组合选择器是CSS中非常强大的工具，能够通过组合不同的选择器精确地定位目标元素。合理使用组合选择器可以减少冗余代码，提升样式表的可维护性。下面详细介绍几种常见的组合选择器及其使用场景。

后代选择器

后代选择器通过空格连接两个选择器，匹配所有符合第二个选择器的元素，且这些元素是第一个选择器的后代。这种选择器非常适合用于嵌套结构的样式控制。

<div class="container">
  <p>这是一个段落</p>
  <div>
    <p>这是嵌套的段落</p>
  </div>
</div>

.container p {
  color: blue;
}

上面的代码会将所有在.container内的<p>元素文字颜色设置为蓝色，无论嵌套多深。

子选择器

子选择器使用>符号连接两个选择器，只匹配直接子元素。与后代选择器不同，子选择器不会匹配嵌套更深的元素。

<ul class="menu">
  <li>一级菜单
    <ul>
      <li>二级菜单</li>
    </ul>
  </li>
</ul>

.menu > li {
  border-bottom: 1px solid #ccc;
}

这里只有直接子<li>元素会添加下边框，嵌套的二级菜单不受影响。

相邻兄弟选择器

相邻兄弟选择器使用+符号，匹配紧接在第一个元素后的第二个元素。这两个元素必须具有相同的父元素。

<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>

h2 + p {
  margin-top: 0;
}

这样只有紧接在<h2>后面的第一个<p>元素的顶部边距会被移除。

通用兄弟选择器

通用兄弟选择器使用~符号，匹配第一个元素后面的所有同级第二个元素。

<h3>小标题</h3>
<p>段落1</p>
<div>分隔</div>
<p>段落2</p>

h3 ~ p {
  color: green;
}

所有在<h3>之后的<p>元素都会变成绿色，无论中间是否有其他元素间隔。

组合使用多个选择器

可以将多种组合选择器结合使用，实现更精确的选择。

<div class="article">
  <h2>文章标题</h2>
  <div class="meta">作者信息</div>
  <p>正文内容...</p>
  <div class="footer">
    <p>页脚内容</p>
  </div>
</div>

.article > h2 + .meta {
  font-size: 0.8em;
  color: #666;
}

.article > p:not(.footer p) {
  line-height: 1.6;
}

这个例子展示了如何组合使用子选择器和相邻兄弟选择器，同时结合否定伪类:not()来排除特定元素。

属性选择器组合

属性选择器可以与其他选择器组合使用，实现基于属性的精确选择。

<input type="text" required>
<input type="submit">
<a href="#top" target="_blank">返回顶部</a>

input[type="text"] {
  border: 1px solid #ddd;
}

a[href^="#"] {
  color: blue;
}

input[required] {
  background-color: #fff9e6;
}

这里分别使用了精确匹配、开头匹配和属性存在匹配三种方式。

伪类组合技巧

伪类选择器与组合选择器配合使用可以创建复杂的选择逻辑。

<ul class="nav">
  <li>首页</li>
  <li>产品</li>
  <li class="active">服务</li>
  <li>关于</li>
</ul>

.nav li:hover {
  background-color: #f0f0f0;
}

.nav li.active {
  font-weight: bold;
}

.nav li:not(.active):hover {
  color: #0066cc;
}

这个例子展示了如何组合:hover、类选择器和:not()伪类来实现不同的悬停效果。

性能优化考虑

虽然组合选择器功能强大，但过度复杂的组合可能会影响页面渲染性能。浏览器解析CSS选择器是从右向左的，因此应该尽量避免过于通用的右侧选择器。

/* 不推荐 */
div.container ul.nav li a {}

/* 推荐 */
.nav-link {
  /* 直接使用类名 */
}

对于需要频繁操作的元素，使用类选择器通常比复杂的组合选择器性能更好。

响应式设计中的应用

组合选择器在响应式设计中特别有用，可以针对不同屏幕尺寸应用不同的样式规则。

/* 移动设备 */
.sidebar {
  display: none;
}

/* 桌面设备 */
@media (min-width: 768px) {
  .main-content + .sidebar {
    display: block;
    width: 300px;
  }
}

这里使用相邻兄弟选择器在桌面布局中显示侧边栏，而在移动设备上隐藏。

表单样式的高级控制

组合选择器可以精确控制表单元素的各种状态。

<form>
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <input type="checkbox" id="remember">
  <label for="remember">记住我</label>
</form>

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #4a90e2;
}

input:checked + label {
  color: green;
}

input:not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
  padding: 8px;
}

这个例子展示了如何组合属性选择器、伪类和相邻兄弟选择器来创建复杂的表单交互样式。

特定场景下的选择器组合

在某些特定布局中，组合选择器可以解决特殊问题。

<div class="gallery">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <!-- 每行显示3张图片 -->
</div>

.gallery img {
  width: 32%;
  margin-right: 1%;
  margin-bottom: 1%;
}

.gallery img:nth-child(3n) {
  margin-right: 0;
}

这里使用:nth-child()伪类选择器确保每行第三张图片没有右边距，实现完美的网格布局。