如何使无法使用 CSS 突出显示文本？

Posted 2023-03-06

【中文标题】如何使无法使用 CSS 突出显示文本？

【英文标题】：How do I make it impossible to highlight text using CSS?

【发布时间】：2013-06-01 08:24:30

【问题描述】：

我正在尝试制作一个网站。我用表格做了一个标题，当你突出显示它时，它看起来很俗气。

.topmenu::selection 
    
    background: rgba(255,79,79,0); /* Change highlight color */
    

我在 php 中使用 <div class="topmenu::selection"> 来调用它。我是否错误地调用了此代码？

谢谢！

编辑： 这似乎不太奏效。如果有任何更改，我正在使用表达式引擎。这是我到目前为止的工作：

<meta http-equiv="Content-Type" content="text/html; charset=charset" /> <link rel="shortcut icon" href="/Flame.ico" />
 <title>New Hope Christian College</title>
 <link rel="stylesheet" type="text/css" href="/nhcc-css/text.css" /> 
<center> 
<table  border="0" div class="topmenu">

.topmenu 
    FONT-SIZE: 12px; COLOR: #000000;
    FONT-FAMILY: Arial, Helvetica, sans-serif;


.topmenu::selection 
    background: transparent;

.topmenu::-moz-selection 
    background: transparent;

.topmenu a 
    color: #A71137; text-decoration: none;

a:hover 
    COLOR: #000000;
    text-decoration: none;

基本上，我有一个表格，我希望标题（这是一个表格）是“不可选择的”，而正文的其余部分是可选的。

这个是为我做的！

在 CSS3 用户选择属性中是可能的：

CSS

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

你也可以添加 cursor:default;在 :hover peuso-element 上。

以表格和标题为例

http://jsfiddle.net/swAmt/2/

【问题讨论】：

试试这个链接它需要多行：[***.com/questions/826782/… [1]:***.com/questions/826782/…

不要使用表格制作标题，使用DIVs。

***.com/questions/3779534/… 和 ***.com/questions/826782/… 和 ***.com/questions/2326004/prevent-selection-in-html 的可能重复

那是你未经编辑的标记吗？因为看起来您的 head 元素中有一个表格（这是不允许的）或 body 元素中有一个 head 元素（标题等）（这也是不允许的）。此外，不推荐使用的中心标签、不推荐使用的表格属性等。

【参考方案1】：

改成：

<div class="topmenu">

::selection 是一个伪类。这不是你真正分配给某物的东西。 .topmenu::selection 表示“无论何时选择.topmenu 元素”。

【参考方案2】：

真的没有任何方法可以实现这一点。但是，您可以做的是，通过删除原本会应用的背景颜色，使其 显示 就像使用 CSS 禁用突出显示一样。

它还没有得到完全支持，所以你不能使用不同的供应商前缀，但基本上这会做（至少部分）你所追求的：

::selection 
    background: transparent;

::-moz-selection 
    background: transparent;

请记住，这些是pseudo-class selectors，并且不要在您的标记中构成类本身的一部分。

如果您只想将其应用到 .topmenu，您的标记将如下所示：

HTML: <div class="topmenu">

CSS：

.topmenu::selection 
    background: transparent;

.topmenu::-moz-selection 
    background: transparent;

【讨论】：

这似乎不太奏效。如果有任何更改，我正在使用表达式引擎。到目前为止，这是我的工作：<meta http-equiv="Content-Type" content="text/html; charset=charset" /> <link rel="shortcut icon" href="/Flame.ico" /> <title>New Hope Christian College</title> <link rel="stylesheet" type="text/css" href="/nhcc-css/text.css" /> <center> <table width="960" border="0" div class="topmenu">

.topmenu FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; .topmenu::selection background: transparent; .topmenu::-moz-selection background: transparent; .topmenu a color: #A71137; text-decoration: none; a:hover COLOR: #000000; text-decoration: none;

基本上，我有一个表格，我希望标题（这是一个表格）是“不可选择的”，而正文的其余部分是可选的。

@JaredTillford 您应该将其编辑到您的问题中，而不是在 cmets 中。在 cmets 中很难跟上。

【参考方案3】：

在html中，将DIV类改为：

<div class="topmenu">

我似乎也有一个问题，用

突出显示文本

background: rgba(255,79,79,0);

尝试使用0以外的其他值，例如

background: rgba(255,79,79,0.5);

【参考方案4】：

在 CSS3 user-select 属性中是可能的：

CSS

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

您也可以在:hover peuso-element 上添加cursor:default;。

以表格和标题为例

http://jsfiddle.net/swAmt/2/

【讨论】：

这个是为我做的！非常感谢！