保护 DIV 不被选择答案

【问题标题】：Protect a DIV from selection保护 DIV 不被选择
【发布时间】：2012-02-28 01:19:37
【问题描述】：

所以我有一个带有可点击幻灯片元素的容器 div。双击下一个或上一个按钮时，幻灯片元素之后的几个标签会突出显示。如果我禁用下一个 div 的选择，双击将选择下一个 div。

目前我正在使用：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

这个 CSS 对我不起作用，因为我不想禁用对 div 和 div 内所有元素的选择，我只想保护 div 子元素免受另一个 div 的双击选择。有没有办法保护 div 不被选择？

【问题讨论】：

标签： html css

【解决方案1】：

如果您要从 div 中选择所有后代，请执行以下操作：

div * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

但是，显然在这种情况下存在速度问题，尤其是对于生产而言。我建议修改您的 HTML 并选择 div 的直系后代。

div h1,
div p,
div span/*, etc. */ {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

如果您想在div 的子元素上覆盖user-select: none 的默认继承，则为每个元素添加user-select: text（包括跨浏览器声明）。

【讨论】：

使用 * 可以进行测试，但千万不要在生产代码中使用它
您想要获取div 的所有后代。如果您想获得更具体的信息，请在类或 ID 上使用星号选择器。我真的认为这不值得投反对票。
其原因是 CSS 从 right to left 而不是 left to right 解析。这意味着它首先获取网站上的所有元素，然后向左移动，检查它们是否有父 div。这很慢。将其与例如* #div 进行比较 - 首先它需要一个元素，然后检查其父元素是否是任何东西 - 快速。如果没有明确的声明“不要在生产中这样做”，我同意它应该被否决:)
@Nick - 快速更改类似这样的内容，而不是 div h1, div p { } 并写下他应该像这样添加他所有的后代元素，我很乐意改变我的投反对票
* #div 和 #div 是等价的。