如何使用CSS访问字体为"courier new“的文本？

Question

我正在编写一个css代码来禁用文本选择。包含了一些css，如下所示。

 -webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
 user-select:none;

然而，我希望具有字体"Courier New“的文本能够被选中。因为具有此字体的文本将是代码或命令。

这看起来有点棘手，或者根本不可能？;)

Answer 1

下面是一个允许在code元素或类.code中进行选择的示例。我想您可以调整其中的一个，以允许您以当前显示代码的元素为目标。

我还包含了一些检查所有元素的font-family的示例JQuery代码，这不是最有效的方法……建议使用class / tag选项。

如果你还想要别的东西，请告诉我。

注意到@DigitalJedi提到的默认值是user-select: auto

​

​

演示

​

// Cycle through all elements
$("*").each(function() {

  // Check if element has the font "courier-new" set
  // Using indexOf
  if ($(this).css('font-family').toLowerCase().indexOf("courier new") >= 0 ) {

    // Add the code class if it is
    $(this).addClass("code");

  }
  
  // Check if element has the font "courier-new" set
  // Using Regular Expression
  // i - ignore case
  if (/courier new/i.test( $(this).css('font-family') )) {
  
    // Add the code class if it is
    $(this).addClass("red-text");
  
  }
  
});

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

code, .code {
  font-family: courier new;
  -webkit-touch-callout: all;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.red-text {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Some text here</p>
<code>Some code here (code element)</code>
<p>Some more text</p>
<p class="code">Some code here (paragraph element with code class)</p>
<p>Some more text</p>
<p style="font-family:Courier New, Courier, monospace;;">Some code here (paragraph with font set to courier new, selectable via JQuery)</p>
<p>Some more text</p>

​

Answer 2

尽管有其他答案，但也可以使用CSS完成，尽管您可能对html标记中的内联样式属性不满意。

附加的代码显示您可以使用CSS属性选择器[some-attrib]并在例如内联style属性中搜索特定字符串。

UPDATE注意！

内联样式优先于CSS类，因此此解决方案应该不起作用(使用类.test修改内联style属性)。然而，火狐、Chrome和Edge接受这一点(因为font是一个“速记属性”？？)，而IE11不接受。(我检查了所有四个浏览器)。

令人不安和困惑..。

UPDATE 2解决了之前的更新，内联定义本身的值不能改变，只能是其他的，未定义的(或在=>声明的规则中)具有相等或更低的优先级。

​

.test {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
 user-select: none;
}
.test[style*="Courier New"] {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
 user-select: text;
}

.font {
font-size: 2rem /* works */
}
.test[style*="16px/30px"] {
font-size: 20px;    /* won't work */
line-height: 35px;  /* ditto */
}
.test[style*="blue"] {
color: green;       /* won't work */
}
.test[style*="font-family: 'Courier New'"] {
color: green;       /* works great */
font-size: 20px;    /* ditto */
line-height: 35px;  /* also  */
}

<p class="test">default unselectable font</p>

<p class="test" style="font: italic bold 16px/30px 'Courier New',Georgia, serif">selectable Courier New</p>

<p class="test" style="font: 16px/30px serif; color: blue">blue serif font sized 16px/30px</p>
<p class="test" style="font-family: 'Courier New'">green selectable Courier New</p>

<p class="test font" style="font-family: 'Courier New'">font test 1 Courier New</p>
<p class="font" style="font-family: 'Courier New'">font test 2 Courier New</p>

​

Answer 3

这在CSS中是做不到的，因为没有不同字体的选择器。

然而，对于不同类型的文本，您可以使用不同的类来实现相同的功能：：

​

.text{
 -webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
 user-select:none;
}


.code{
 -webkit-touch-callout:auto;
-webkit-user-select:auto;
-moz-user-select:auto;
-ms-user-select:auto;
 user-select:auto;
font-family: Courier New, sans-serif;
user-select:normal;
}

<span class="text">this is some </span><span class="code">code</span>

​