如何为包含文本Example Text1的h3子元素的div修改CSS

下面提供几种不同场景下的实现方式，你可以根据浏览器兼容性需求和是否能修改HTML来选择：

1. 现代浏览器原生CSS方案（无需修改HTML） #

利用CSS的:has()选择器结合文本匹配（注：:contains()目前是实验性特性，部分浏览器需开启支持），直接定位目标div：

/* 选中包含文本为"Example Text1"的h3的外层.test容器 */
.test:has(h3:contains('Example Text1')) {
  /* 自定义样式示例 */
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

如果目标浏览器不支持:contains()，可以改用JavaScript辅助方案（见方法3）。

2. 兼容性最优方案（修改HTML） #

直接给目标div添加专属类名，这是最稳妥、兼容性最好的方式：

修改后的HTML结构：

<div class="test highlight-div">
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div class="test">
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>

对应的CSS样式：

.highlight-div {
  /* 自定义样式 */
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

3. JavaScript动态定位方案（无需修改HTML） #

通过JS遍历元素，匹配文本后给目标div添加样式或类：

// 获取所有.test类的容器
const testContainers = document.querySelectorAll('.test');

testContainers.forEach(container => {
  const title = container.querySelector('h3');
  // 匹配文本时注意去除首尾空格
  if (title && title.textContent.trim() === 'Example Text1') {
    // 方式1：直接设置行内样式
    container.style.backgroundColor = '#f5f5f5';
    container.style.padding = '12px';
    container.style.border = '1px solid #ddd';
    
    // 方式2：添加类名（推荐，样式与逻辑分离）
    // container.classList.add('highlight-div');
  }
});

若使用添加类名的方式，需提前在CSS中定义.highlight-div的样式（同方法2的CSS）。

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