我组装了这支笔：https：//codepen.io/nanospicer/pen/yzqgqvd

我的想法是，使用兄弟选择器，当我想要设置样式的元素之前的元素被聚焦时，我想要设置某个元素的样式。

它可以很好地处理输入元素，但在使用带有contenteditable属性的元素时，它会失败得很惨：

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

div[contenteditable="true"]::before {
  text-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;
}

*:focus+* {
  border-color: red;
}

<代码><；表单>；<；输入placeholder=“ first ” ID=“ first ” type=“ text ”>；<；输入placeholder=“ second ” ID=“ second ” type=“ password ”>；<；/窗体>；<；DIV类=“容器”>；<；DIV contenteditable=“ true ” placeholder=“ first ”>；<；/DIV>；<；DIV contenteditable=“ true ” placeholder=“ second ”>；<；/DIV>；<；/DIV>；

注：已在Firefox和Chrome上测试。

顺晟科技：

这很奇怪。可能是虫子.

此解决方法适用于PC上的Firefox和Chrome.没有测试其他浏览器/平台。

<form>
  <input placeholder="first" id="first" type="text">
  <input placeholder="second" id="second" type="password">
</form>
<div class="container">
  <div contenteditable="true" placeholder="first"></div>
  <div contenteditable="true" placeholder="second"></div>
</div>

就像您在CSS的开头所做的那样，更具体地表明您希望使用[contenteditable]:focus + * { border-color:green; } 属性进行反应。

默认情况下，contenteditable是不可编辑的，因此不是div，因此您必须对此更加具体一些。

要做到这一点，你应该编辑最后一个CSS属性来添加第二个选择器行，就像我在这里写的：

focusable

或者如果你想让它更通用：

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