CSS 双击时如何停止突出显示 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7018324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop highlighting of a div element when double-clicking
提问by dave
I have this div element with a background image and I want to stop highlighting on the div element when double-clicking it. Is there a CSS property for this?
我有一个带有背景图像的 div 元素，我想在双击它时停止突出显示 div 元素。是否有用于此的 CSS 属性？
回答by tw16
The CSS below stops users from being able to select text. Live example: http://jsfiddle.net/hGTwu/20/
下面的 CSS 阻止用户选择文本。现场示例：http: //jsfiddle.net/hGTwu/20/
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
To target IE9 downwards and Opera the html attribute unselectablemust be used instead:
要向下定位 IE9 和 Opera，unselectable必须使用html 属性：
<div unselectable="on">Test Text</div>
回答by Hans
This works for me
这对我有用
html
{
-webkit-tap-highlight-color:transparent;
}
回答by Sunil
I was trying to find a solution to stopping div highlighting in Chrome, and turned to this post. But, unfortunately, none of the answers solved my problem.
我试图找到一种解决方案来停止 Chrome 中的 div 突出显示，并转向这篇文章。但是，不幸的是，没有一个答案解决了我的问题。
After a lot of online research, I found that the fix is something very simple. There is no need for any complex CSS. Just add the following CSS to your web page and you are all set. This works in laptops as well as mobile screens.
经过大量在线研究，我发现修复方法非常简单。不需要任何复杂的 CSS。只需将以下 CSS 添加到您的网页即可。这适用于笔记本电脑和移动屏幕。
div { outline-style:none;}
NOTE: This worked in Chrome Version 44.0.2403.155 m. Also, it is supported in all major browsers of today as explained at this url: http://www.w3schools.com/cssref/pr_outline-style.asp
注意：这适用于 Chrome 版本 44.0.2403.155 m。此外，它在当今所有主要浏览器中都受支持，如以下网址所述：http: //www.w3schools.com/cssref/pr_outline-style.asp
回答by SterlingVix
I'm no CSS expert, but I think you can use tw16's answer as long as you expand the number of elements affected. For instance, this prevents highlighting everywhere on my page without affecting any other kind of interactivity:
我不是 CSS 专家，但我认为只要扩大受影响的元素数量，就可以使用 tw16 的答案。例如，这可以防止在我的页面上的任何地方突出显示而不影响任何其他类型的交互：
*, *:before, *:after {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
That first line is courtesy of Paul Irish (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/).
第一行由 Paul Irish 提供（通过http://adamschwartz.co/magic-of-css/chapters/1-the-box/）。
回答by jasonleonhard
Target all div elements:
定位所有 div 元素：
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Target all elements:
定位所有元素：
::-moz-selection { background:transparent; }
::selection { background:transparent; }
回答by Jin.
disable user selecting:
禁用用户选择：
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
set background transparent for selected element:
为所选元素设置背景透明：
div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
