Html 当（意外）单击空白时禁用选择（使用CSS）

我有以下恼人的问题：当在我的网站的空白处点击多次时，它会选择整行和整段

但是，由于光标下没有文本（例如，空的绿色区域），我甚至不理解为什么它首先要选择任何内容

简单地说：如果我点击文本，我想要默认的选择行为，但如果我不点击文本，它不应该选择任何东西。可能吗

参考HTML代码：

<div>
    <span>Clicks:</span> <input id="clicks" value="0"></input>

    <div style="background-color:LightGreen"
        onclick="$('#clicks').val(parseInt($('#clicks').val()) + 1);"><span class="hard">CLICK THE GREEN AND CLICK IT HARD!</span>
    <br/>
       <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS5lQfEXNPKzMGZRHUQJJJj97NFoi1Q4iZ_dT1GK9lrYsjrgd7i5XWsrTA"></img>
       <div style="width: 100%; display:inline-block"><span>more text</span></div>
    </div>
    <span>even more text</span>

    <p id="log"></p>
</div>

点击：
点击绿色并用力点击！


更多文本
更多文本

我们可以通过以下方法解决此问题

我们首先禁用整个文本选择，如下所示：

/**
 * Disallow selection for the entire site.
 */
body {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */ 
}

/**
 * White-list all of HTML5's "pure text" elements.
 * @see http://www.w3schools.com/tags/
 */
 a, abbr, address, b, bdi, bdo, blockquote, br, button, caption, center, 
 cite, code, col, dd, del, dfn, dt, em, figcaption, footer, h1, h2, h3, h4, 
 h5, h6, i,  input, ins, kbd, label, legend, mark, output, p, pre, q, rp, rt, 
 ruby, s,  samp, small, span, strike, strong, sub, summary, sup, td, textarea, 
 th, time,  title, tt, u, var {
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
 }

然后，我们仔细查看一组和所有纯文本元素，如下所示：

/**
 * Disallow selection for the entire site.
 */
body {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */ 
}

/**
 * White-list all of HTML5's "pure text" elements.
 * @see http://www.w3schools.com/tags/
 */
 a, abbr, address, b, bdi, bdo, blockquote, br, button, caption, center, 
 cite, code, col, dd, del, dfn, dt, em, figcaption, footer, h1, h2, h3, h4, 
 h5, h6, i,  input, ins, kbd, label, legend, mark, output, p, pre, q, rp, rt, 
 ruby, s,  samp, small, span, strike, strong, sub, summary, sup, td, textarea, 
 th, time,  title, tt, u, var {
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
 }

---

这样，用户仍然可以选择文本，但不会意外地选择空白。如果您发现任何不可选择的文本，只需将其包装在一个

中。您刚刚问了一个问题，然后就回答了吗？为什么？@VangelTzo让我告诉你：“说得非常清楚，不仅仅可以问和回答你自己的问题，这是被明确鼓励的。”-就我而言，我在几个月前与一位朋友交谈时听说过这个问题，今天我也遇到了这个问题，我能够解决它。我的朋友认为，这是一个很好的解决办法。我猜，很多其他人也有类似的问题……我不知道，你可以自由发布，因为它符合SO规则；）@VangelTzo我明白了-很多人（从你评论的得票数来看）不喜欢人们这样做，因为他们认为，这是一种代表性耕作。看到这个问题实际上是重复的（事实证明，我不知道！），我同意这里的情况看起来可疑P@Domi因为这个问题以前被问过，我建议你标记这个问题以引起主持人的注意，并请求合并。这将把你的答案移到规范问题上，这样你就可以看到：）急切地等待着

：contract

CSS选择器。。