目标仅在CSS中的父类和子类中第一次直接匹配相同的类

在CSS中，父类和子类之间的选择器称为后代选择器。当我们希望仅选择父类和子类中第一次直接匹配相同的类时，可以使用:first-child伪类选择器。

:first-child伪类选择器用于选择父元素下的第一个子元素，且该子元素具有指定的类。它可以用来对特定的子元素进行样式设置或其他操作。

下面是一个示例代码：

HTML代码：

<div class="parent">
  <div class="child">第一个匹配的子元素</div>
  <div class="child">第二个匹配的子元素</div>
  <div class="child">第三个匹配的子元素</div>
</div>

CSS代码：

.parent .child:first-child {
  /* 在父类和子类中第一次直接匹配相同的类时应用的样式 */
  color: red;
}

在上面的代码中，我们使用了.parent .child:first-child选择器来选择父类为.parent的元素下的第一个子元素，并且该子元素具有类名.child。我们为这个匹配的子元素设置了颜色为红色。

这样，只有第一个匹配的子元素会应用这个样式，其他的子元素不会受到影响。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
• 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
• 腾讯云网络安全（DDoS 防护、Web 应用防火墙等）：https://cloud.tencent.com/product/ddos