为什么相邻兄弟选择器对设置contenteditable属性的元素不生效？

问题根因 #

该问题是CSS选择器优先级冲突导致的，与contenteditable属性本身的聚焦逻辑无关：

• 你为可编辑div设置边框样式时使用的选择器div[contenteditable="true"]优先级得分为11（1个元素选择器+1个属性选择器）
• 你实现相邻兄弟聚焦样式使用的选择器*:focus + *优先级得分仅为10（仅1个:focus伪类选择器，通用选择器不参与优先级计算）
• 优先级更高的div[contenteditable="true"]的border-color: gray规则，直接覆盖了相邻兄弟选择器的border-color: red规则

input元素对应的样式可以正常生效，是因为input作为单个元素选择器优先级得分仅为1，低于相邻兄弟选择器的10分，因此规则可以正常覆盖。

解决方法 #

提高相邻兄弟聚焦样式的选择器优先级即可，比如将原有规则替换为以下写法：

div[contenteditable="true"]:focus + *,
input:focus + * {
  border-color: red;
}

也可以直接给该规则的属性值添加!important声明强制生效，但更推荐通过调整选择器精度的方式处理优先级冲突。

另外你原有代码里div[contenteditable="true"]::before的text-color是无效CSS属性，正确属性名为color，以下是完整修正后的代码：

.container,
form {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

div[contenteditable="true"]::before {
  color: gray;
  opacity: 0.6;
  content: attr(placeholder);
}

div[contenteditable="true"],
input {
  /* remove system hightlighting*/
  outline-style: none;
  box-shadow: none;
  min-height: 40px;
  appearance: none;
  border: 3px solid;
  border-color: gray;
  border-radius: 6px;
}

div[contenteditable="true"]:focus,
input:focus {
  border-color: blue;
}

/* 调整后的高优先级选择器 */
div[contenteditable="true"]:focus + *,
input:focus + * {
  border-color: red;
}

内容的提问来源于stack exchange，提问作者Some random IT boy