【问题标题】:How do I make it impossible to highlight text using CSS?如何使无法使用 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 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;
}

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

这个是为我做的!

在 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/

【问题讨论】:

标签: css text highlighting


【解决方案1】:

改成:

<div class="topmenu">

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

【讨论】:

    【解决方案2】:

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

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

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

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

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

    HTML: &lt;div class="topmenu"&gt;

    CSS:

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

    【讨论】:

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

      【讨论】:

      • 这个是为我做的!非常感谢!
      猜你喜欢
      • 2022-11-13
      • 2017-02-04
      • 2012-01-28
      • 1970-01-01
      • 2013-04-07
      • 2021-08-08
      • 2011-11-22
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多