內容可編輯選擇器？

Question

我想禁止爲用戶無法編輯的所有元素（例如文本或圖像）選擇文本，但我仍然希望爲其中可以鍵入的元素（如輸入或textareas）保留它。

要禁用文本選擇，我使用以下命令：

* { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

但正如我所說，這影響的所有元素，所以我嘗試使用這個選擇：

*[contenteditable=false] 

，而不只是*

但由於某些原因，這顯然不起作用，CSS中是否有任何選擇檢測內容可編輯元素？

Answer 1

您正在使用的是attribute selector，它將根據contenteditable attribute的選擇進行選擇。

你實際上正在尋找的是一種方式來而不是選擇元素接受輸入，沒有共享選擇器。您將不得不使用:not並列出所有此類標籤（並可能包含contenteditable屬性選擇器）。

*:not(input):not(textarea):not([contenteditable=""]):not([contenteditable="true"]) { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<input value="input" /> 
 
<hr /> 
 
<textarea>textarea</textarea> 
 
<hr /> 
 
<p>paragraph</p> 
 
<hr /> 
 
<p contenteditable>paragraph editable</p>