選擇風格時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說

的〜符號表示右後（沒有孩子）