内容可编辑选择器？

Question

我想禁止为用户无法编辑的所有元素（例如文本或图像）选择文本，但我仍然想为您可以在其中键入的元素（例如输入或文本区域）保留它。

要禁用文本选择，我使用以下命令：

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

但正如我所说，这会影响所有元素，所以我尝试使用这个选择器：

*[contenteditable=false]

而不仅仅是 *

但由于某种原因，这显然不起作用，CSS 中是否有选择器来检测内容可编辑元素？

Answer 1

您正在使用属性选择器，它将选择contenteditable属性的存在。

您实际上正在寻找的是一种不选择接受输入的元素的方法，因为这些元素没有共享选择器。您必须使用: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>