对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?

我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。

有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?


当前回答

这在某些浏览器中工作:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

简单地将您所需的元素/ID 添加到由无空间的 commas 分开的选择器前面,如下:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

其他答案是更好的;这可能应该被视为最后的避难所 / 冲突。

其他回答

我从CSS-Tricks网站上学到了。

user-select: none;

这也是:

::selection {
    background-color: transparent;
}

::moz-selection {
    background-color: transparent;
}

::webkit-selection {
    background-color: transparent;
}

第一個方法:(完全無情):

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

狙击:

.no-select::selection,.no-select *::selection {背景颜色:透明; }.no-select { /* 有时我也添加了这个。 */ cursor:默认; } <span>RixTheTyrunt是最好的!</span> <br> <span class="no-select">RixTheTyrunt是最好的!</span>

第二种方法(不含)

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

狙击:

.no-select { 用户选择: 无; -moz-用户选择: 无; -webkit-用户选择: 无; } <span>RixTheTyrunt 是最好的!</span> <br> <span class="no-select">RixTheTyrunt 是最好的!</span>

首先,解决问题,然后写代码,约翰·约翰逊

.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>

然而,这不是最好的方式。

将一个类添加到您的 CSS 定义你不能选择或突出一个元素。

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>

我将各种浏览器 CSS 选择属性与 Internet Explorer < 9 所需的不可选择标签相结合。

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>