选择风格时CONTENTEDITABLE已经集中

Question

我想换另一种元素的样式，当CONTENTEDITABLE格具有焦点，如下图所示：

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

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

不幸的是，上述不工作时，我曾尝试以下CSS也：

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

精细的风格与自己的作品使用[contenteditable="true"]:focus在应用焦点时可编辑div，但这些都不能同时对另一个元素进行样式设置。这可能吗？

Answer 1

你需要使用~。它是一般的兄弟选择器，它将两个选择器分开，并且只有在第二个元素位于第一个元素之前时才与第二个元素匹配，并共享一个共同的父元素。检查：

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

---

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

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

更多关于一般兄弟选择可以在here被读取。

Answer 2

这是你想要的东西：

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

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

或者这（你提到你已经试过了，但它的工作）：

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

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

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

Answer 3

您可以通过使用jQuery改变.textClass的风格，当你div有重点，：

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

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

}); 

Answer 4

[CONTENTEDITABLE = “真”]：关注〜.testClass将做的工作为Fahad Hasan说

的〜符号表示右后（没有孩子）