当contenteditable具有焦点时，更改另一个元素的样式

Question

我想在可信任的div具有焦点时更改另一个元素的样式，如下所示：

＆＃13;

＆＃13;

[contenteditable="true"]:focus .testClass {
    background-color: black;
}

＆＃13;

<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>

＆＃13;

＆＃13;

＆＃13;

不幸的是，上面的工作没有用，我也尝试过以下的CSS：

[contenteditable="true"]:focus + .testClass {
[contenteditable="true"]:focus > .testClass {
[contenteditable="true"]:focus, .testClass {

在应用焦点时，使用[contenteditable="true"]:focus可以很好地设置可编辑div的样式，但这些都不能同时设置另一个元素的样式。这可能吗？

Answer 1

这就是你想要的：

＆＃13;

＆＃13;

[contenteditable="true"]:focus {
    background-color: black;
}

＆＃13;

<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>

＆＃13;

＆＃13;

＆＃13;

或者这（你提到你已经尝试过，但确实有效）：

＆＃13;

＆＃13;

[contenteditable="true"]:focus + .testClass {
    background-color: black;
}

＆＃13;

<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>

＆＃13;

＆＃13;

＆＃13;

这里有一些关于CSS选择器的阅读： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 2

您需要使用~。它是一般的兄弟选择器，它分隔两个选择器，只有当它在第一个元素之前时才匹配第二个元素，并且它们共享一个共同的父元素。检查一下：

[contenteditable="true"]:focus ~ .testClass {
     background: red;
}

---

＆＃13;

＆＃13;

[contenteditable="true"]:focus ~ .testClass {
  background: red;
}

＆＃13;

<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>

＆＃13;

＆＃13;

＆＃13;

有关普通兄弟选择器的更多信息，请阅读here。

Answer 3

[contenteditable =“true”]：focus~ .testClass将按照Fahad Hasan所说的那样完成工作

〜符号表示紧随其后的第一个元素（非儿童）

Answer 4

当div具有焦点时，您可以使用jquery：

更改.textClass的样式

$("div[contenteditable=true]").focusin(function () {

    $(".testClass").css({
        "background-color": "black",
    });

});