子选择器

子选择器（Child Selector）是CSS中的一种组合选择器，它通过元素之间的直接父子关系来选择元素。与后代选择器不同，子选择器只选择直接子元素，而不选择间接子元素。

基本语法

子选择器的语法是使用>符号分隔两个选择器：

parent > child {
  property: value;
}

其中，parent是父元素的选择器，child是直接子元素的选择器。

工作原理

子选择器会匹配所有直接作为父元素子元素的元素。也就是说，只有当元素B是元素A的直接子元素时，子选择器A > B才会匹配元素B。如果元素B是元素A的间接子元素（即存在中间元素），则不会被匹配。

使用示例

示例1：选择div的直接子元素p

<div>
  <p>这是div的直接子元素</p>
  <div>
    <p>这是div的间接子元素</p>
  </div>
</div>

div > p {
  color: blue;
  font-size: 16px;
}

这段CSS会选择所有作为div直接子元素的p元素。在上面的HTML中，第一个p元素会被选中，而第二个p元素（是div的间接子元素）不会被选中。

示例2：选择列表的直接子元素

<ul class="nav">
  <li>首页</li>
  <li>关于我们</li>
  <li>
    产品
    <ul>
      <li>产品1</li>
      <li>产品2</li>
    </ul>
  </li>
</ul>

.nav > li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.nav > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
}

.nav > li:hover > ul {
  display: block;
}

这段CSS会选择nav类的直接子元素li，并为它们设置样式。然后，它会选择这些li的直接子元素ul（即下拉菜单），并为它们设置绝对定位和隐藏。最后，当鼠标悬停在li上时，显示其子元素ul。

示例3：结合类选择器使用

<div class="container">
  <h2 class="title">标题</h2>
  <div class="content">
    <p>内容段落</p>
  </div>
</div>

.container > .title {
  color: #333;
  font-size: 24px;
}

.container > .content {
  padding: 20px;
  background-color: #f5f5f5;
}

这段CSS会选择container类的直接子元素title和content，并为它们设置不同的样式。

特点

1. 直接选择：只选择直接子元素，不选择间接子元素
2. 精确性：比后代选择器更精确，可以避免影响深层嵌套的元素
3. 中优先级：在CSS选择器优先级中，子选择器的优先级与后代选择器相同
4. 性能优势：由于只匹配直接子元素，性能比后代选择器稍好

注意事项

1. 层级关系：子选择器只匹配直接的父子关系，不匹配更深层的嵌套
2. 与后代选择器的区别：后代选择器使用空格分隔，匹配所有后代元素；子选择器使用>分隔，只匹配直接子元素
3. 浏览器兼容性：子选择器在IE6及以下版本的浏览器中不支持

浏览器兼容性

相关资源

• MDN Web Docs - 子选择器
• W3Schools - CSS 子选择器

学习建议

子选择器是CSS中常用的组合选择器之一，它与后代选择器类似但更精确。建议初学者理解子选择器与后代选择器的区别，并在需要精确控制直接子元素样式时使用子选择器。