コンテンツ編集可能なセレクタ？

Question

ユーザーが編集できないすべての要素（テキストや画像など）に対してテキストを選択しないようにしたいのですが、入力やテキストエリアのように内部に入力できる要素に対してはそれを保持したいと考えています。テキストの選択を無効にするには

は、私は次のようにします。

* { 
    -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>