html - 内容可编辑选择器？

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>