无法访问HTML文件时，能否通过CSS为div添加新class以区分元素？

嘿，这个问题我天天碰到！先给你一个明确的结论：CSS本身无法给元素添加新的class属性——因为CSS的核心作用是控制元素的样式表现，而不是修改DOM的结构或属性（这种操作属于JavaScript的范畴）。

不过别着急，我们完全可以通过其他CSS选择器来精准区分这两个div，不用额外加class就能实现差异化样式。这里给你几个实用的方案：

• 位置类选择器：如果两个div是同一个父元素下的子元素，直接用位置定位就行。比如：

  /* 选中父元素下的第一个div */
  .parent-container > div:nth-child(1) {
    background: #f0f0f0;
  }
  /* 选中父元素下的第二个div */
  .parent-container > div:nth-child(2) {
    background: #e0e0e0;
  }
  

  也可以用:first-of-type、:last-of-type这类更直观的选择器，根据你的实际DOM结构来选。

• 基于内部内容的选择器：如果其中一个div包含特定的子元素、文本或属性，用:has()选择器（现代主流浏览器都支持）来定位。比如第一个div里有个带survey-header类的标题，那：

  /* 选中包含.survey-header子元素的div */
  div:has(.survey-header) {
    padding: 20px;
  }
  /* 选中不包含该元素的div */
  div:not(:has(.survey-header)) {
    padding: 10px;
  }
  

• 相邻兄弟选择器：如果两个div是紧挨着的兄弟元素，先选中第一个，再用+选择器选中它后面的那个：

  /* 第一个div */
  div:first-of-type {
    border: 1px solid blue;
  }
  /* 紧跟在第一个div后的第二个div */
  div:first-of-type + div {
    border: 1px solid red;
  }
  

这些方案基本能覆盖大部分场景，你可以根据自己的实际DOM结构来选最合适的。如果你的调查程序连这些选择器都受限，那可能得看看有没有隐藏的自定义JS入口，但如果只能用CSS的话，上述方法应该够用啦！

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