如何使用CSS为容器中的特定单词着色

时间：2014-05-19 12:29:35

标签： html css

假设我有一个容器：

 <div id="container"> This is a red apple </div>

如何用红色为“红色”字着色？ 像（伪代码）

的东西 
#container:[word="red"]{
   color:red;
}

是否可以在纯CSS中执行此操作而不引入JavaScript或修改现有HTML？

14 个答案:

答案 0 :(得分：22)

背景

这是一个Vanilla JavaScript解决方案，因为CSS无法实现。不是在开玩笑，请阅读specification.您可以匹配元素，元素中属性的名称以及元素中命名属性的值。我看不到元素中匹配内容的任何内容。

简介

这是我的镜头。我确信有一种更时尚的方式，但这是它如何开始的要点。此外，由于您需要 colorify 的颜色数量有限，因此使用一堆if语句会很好。

当然，更好的技术是通过构建颜色字典以编程方式更好地完成它，从而使代码组织起来。但这很有效，而且它是Vanilla JS。显然，我没有Regex的专业知识，所以我确信不需要几行。

功能

  • 适用于多种颜色的情况
  • 适用于多种颜色可见

http://jsfiddle.net/TB62H/5/ 

var text = document.getElementById("content");
var str = text.innerHTML,
    reg = /red|blue|green|orange/ig; //g is to replace all occurances

//fixing a bit
var toStr = String(reg);
var color = (toStr.replace('\/g', '|')).substring(1);

//split it baby
var colors = color.split("|");

if (colors.indexOf("red") > -1) {
    str = str.replace(/red/g, '<span style="color:red;">red</span>');
}

if (colors.indexOf("blue") > -1) {
    str = str.replace(/blue/g, '<span style="color:blue;">blue</span>');
}

if (colors.indexOf("green") > -1) {
    str = str.replace(/green/g, '<span style="color:green;">green</span>');
}

if (colors.indexOf("orange") > -1) {
    str = str.replace(/orange/g, '<span style="color:orange;">orange</span>');
}


document.getElementById("updated").innerHTML = str;

结果

enter image description here

答案 1 :(得分：11)

不是要证明一点，而是回答你的问题 - 在没有JS的CSS中 可能： Example

简而言之：我们为文本颜色设置黑色背景颜色，为特定红色字符串设置红色背景图像。我们使用-webkit-text-fill-color删除原始文本填充。使用-webkit-background-clip: text;将背景剪切为文本轮廓，并将红色图像的大小和位置放在我们想要着色的任何文本字符串上。

请注意： 我永远不会建议在任何实时网站上使用它。这仅适用于 webkit ，因为它基于非标准的wekbit特定的CSS规则。并且颜色并没有真正绑定到彩色文本字符串 - 它完全是静态的。

修改 这是CSS：

#container {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 1.5em 1em;
    background-repeat: no-repeat;
    background-position: 3.4em 0;
    background-color: #000;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
}

答案 2 :(得分：7)

可悲的是，CSS目前没有任何选择器来实现您的需求。您必须使用JavaScript或Server Side Scripting来实现您的目标。

答案 3 :(得分：3)

现在，如果你允许我只使用一点的javascript，也许我不知道这会扩展得多好的警告，可能会破坏很多CSS，并且实现是一个有点粗制滥造。也就是说，我认为我们可以通过重写HTML来简单地给css一点点。

如您所知，我们可以在单词周围添加跨度，我们可以选择它。但是，我们不是只选择所选择的并附加样式信息，而是跨越所有单词。并将该单词作为值附加到属性＆＃34; word＆＃34;。借助获取all the textNodes的方法，它可能看起来像

//adapted from https://stackoverflow.com/a/10730777/1480215
function makeHighlightable(){
  var n, a=[], walk=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
    for(var i=0;i<a.length;i++){
      var newSpan=document.createElement("span")
      var words=a[i].nodeValue.replace(/[\r\n]/g,"").split(' ');
        for(var j=0;j<words.length;j++){
            var escapedWord=words[j].replace(/[^a-zA-Z0-9-']/g,'').toLowerCase()
            words[j]='<span word="'+escapedWord+'">'+words[j]+'</span>'
        }
        words=words.join(" ")
        newSpan.innerHTML=words
        a[i].parentNode.replaceChild(newSpan,a[i])
    }
}

makeHighlightable()

有了这个，你现在可以做到

#container [word=red]{ /* space instead of : */
    color:#F00;
}

Demo

可能可能正常工作。

答案 4 :(得分：3)

简单但无论如何正确答案：否。

请不要在评论中与他人粗鲁，他们花时间阅读你的问题，思考如何解决这个问题，写下答案（或评论）和...... 帮助你 ......他们不值得以粗鲁的方式对待。

祝福和好看。

米格尔。

顺便说一句：检查Wrap certain word with <span> using jquery和http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements

答案 5 :(得分：2)

  1. 在目前的结帐文档中仅使用css选择器无法完成 CSS selectors
    2.   

    可以使用单行语句轻松完成Jquery

    Check Out the Demo

    Highlighting and remove highlight on button click

    The Simplest Solution when You Select a specific word with mouse that word would be highlighted throughout the Container

    Jquery的

    var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);

    修改 

    $('#id1').click(
    function(){
    var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");
$('div').html(text);
    }
);

$('#id2').click(
  function(){
      $( "span.red" ).each(function() {
  $( this ).contents().unwrap();

});

    }
);

    CSS 

    .red {
color: red;
}

    HTML 

    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>

    修改 

    <input type="button" value="Click to highlight" id="id1" />
<input type="button" value="Click to remove highlight" id="id2" />

答案 6 :(得分：1)

使用<span>。 

<div id="container"> This is a <span class="red">red</span> apple </div>

CSS：

.red {
color: red;
}

修改
没有任何额外的Javascript或HTML是不可能的。根据CSS3 specification，没有这样的选择器（有关于CSS3的:contains()选择器的想法）。另请参阅this和this问题。

答案 7 :(得分：1)

如果你不想添加html / javascript，那么simpel的回答是“不”，你们可以

看看以下规范 http://www.w3.org/TR/css3-selectors/#selectors

这是CSS3的所有可用选择器，因此根本不可能，这是你的答案。

您还有2个选项而不更改内容，其中一个已在此处描述：

  • 的javascript
  • 服务器端解析所以所有内容都包含在span标记
    • 中

答案 8 :(得分：1)

使用pseudo elements添加彩色单词并进行一些小心定位以覆盖初始黑色实例。它很脏，但它有效。

#container
{
    position: relative;
    font-family: monospace;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

#container:after
{
    content: "red";
    color: red;
    position: absolute;
    left: 90px
}

Demo

编辑：此外，一个与比例字体一起使用的变体（但在Chrome中至少对我来说不是那么干净）：

#container
{
    position: relative;
    margin: 0;
    padding: 0;
}

#container:before
{
    content: "This is a ";
    position: absolute;
    z-index: 2
}

#container:after
{
    content: "This is a red";
    color: red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

Demo 2

答案 9 :(得分：0)

我不明白为什么人们说没有JavaScript就无法做到这一点。我记得用<span>做那种事情 像这样：

<div id="container"> This is a <span style="color:red">red</span> apple </div>

答案 10 :(得分：0)

所以我有相同的任务，解决方案很简单，但是很棘手 您需要添加：after伪元素，然后：

#container:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 50px;
  background-color: red;
  top: 10px;
  left: 100px;
  z-index: -1;
}

根据情况调整顶部，左侧，高度，宽度。

答案 11 :(得分：-1)

这里有一些代码使用jQuery围绕单词red包装一个类，该单词可以着色。

 <div id="container">This is a red apple</div>

 $("#container:contains('red')").each(function(){
     $(this).html($(this).html().replace("red", "<span class='red'>red</span>"));
 });

答案 12 :(得分：-1)

我正在处理同样的问题。我的基本内容包含在

标签中，我所做的只是围绕我想要在标签中突出显示的每个单词，并使用CSS将标签的颜色更改为红色。简单易用。

e.g 

<p>Base text, and then I want <p1>THIS</p1> word highlighted
</p>

p1 {
color: red;
}

工作得很好，并没有弄乱格式化。

答案 13 :(得分：-2)

您应该使用span标记来包围单词“red”

<div id="container"> This is a <span>red</span> apple </div>

然后使用

选择此范围 
#container span {
    color: red;
}
相关问题
最新问题