如何在不修改原有CSS类的前提下单独选择同class的div设置样式？

一、按位置为每个div单独设置样式 #

不用修改原有类或添加新类，直接用CSS结构伪类选择器定位指定位置的div：

• 第一个div：用:first-child或:nth-child(1)

  .c-transparencia-graficos__part:first-child {
    position: absolute;
    top: 0;
  }
  

• 第二个div：:nth-child(2)

  .c-transparencia-graficos__part:nth-child(2) {
    /* 自定义样式 */
  }
  

• 同理，第n个div用:nth-child(n)，最后一个div用:last-child。如果父元素里还有其他类型元素，用:nth-of-type(n)更准确（只会匹配同类型的div元素）。

二、通过子元素定位父div的方案 #

CSS没有原生的“父选择器”，但有两种可行的替代方式：

1. 使用:has()伪类（主流浏览器已支持） #

:has()可以检测父元素是否包含指定子元素，直接给父div设置样式。比如给包含.sample1子元素的父div加样式：

.c-transparencia-graficos__part:has(.sample1) {
  /* 自定义父div样式 */
}

如果子元素是通过文本内容区分，可尝试:has(:contains("特定文本"))，注意:contains()是实验性属性，部分浏览器需开启实验功能。

2. JavaScript辅助（兼容性更好） #

如果要兼容不支持:has()的旧浏览器，用JS遍历目标div，检查子元素特征后直接设置行内样式：

document.querySelectorAll('.c-transparencia-graficos__part').forEach(div => {
  // 检查是否包含.sample1子元素
  if (div.querySelector('.sample1')) {
    div.style.position = 'absolute';
    div.style.top = '0';
  }
  // 其他子元素判断逻辑可按需添加
});

内容的提问来源于stack exchange，提问作者lekordicosadiluy