将CSS重复应用于特定词 [英] Apply CSS Repeatedly to Specific Words

问题描述

我试图反复自动应用CSS到特定字词。

I'm trying to apply CSS repeatedly and automatically to specific words.

例如，对于Twitter这个词，我想要的文字的颜色＃00ACED。

For example, for the word "Twitter" I want the colour of the text to be #00ACED.

目前，我使用span类别针对特定品牌字词手动应用这些颜色：

At present I am manually applying these colours around specific brand terms using span classes:

<span class="twitter">Twitter</span>

使用CSS：

.twitter {
    color: #00ACED;
}

然而，这是一个过程，我更喜欢一个完成这个样式的方法自动。我有大约20个品牌词与相关的颜色造型。

However, this is a process and I would prefer a method which completes this styling automatically. I have about 20 brand words with an associated colour styling.

任何人都可以帮助我解决这个问题。我使用WordPress，如果这有什么区别。

Can anyone assist me with this problem. I am using WordPress if that makes any difference.

推荐答案

我认为最直接的方法是使用智能 jQuery突出显示插件我遇到了。应用之后，你可以做你所做的。下面是一个示例，其中有一个链接到活小提琴结束：

I think the most straight-forward way to do it is by using a smart jQuery highlight plugin I came across. After applying it, you'll be able to do what you're after. Below is an example, with a link to a live fiddle at the end:

HTML

<p>Some examples of how to highlight words with the jQuery Highlight plugin. First an example to demonstrate the default behavior and then others to demonstrate how to highlight the words Facebook and Twitter with their own class names. Words will be highlighted anywhere in the DOM, one needs only to be specific on where the script should look for the words. It supports case-sensitivity and other options, like in the case of YouTube.</p>

CSS

p { line-height: 30px; }
span { padding: 4px; }
.highlight { background-color: yellow; }
.facebook { background-color: #3c528f; color: white; }
.twitter { background-color: #1e9ae9; color: white; }
.youtube { background-color: #be0017; color: white; }

突出显示插件（需要在 jQuery 和 JavaScript 之前）

<script type="text/javascript" src="http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js"></script>

JS

// default
$("body p").highlight("default");
// specify class name (not case sensitive)
$("body p").highlight("twitter", { className: 'twitter' });
$("body p").highlight("facebook", { className: 'facebook' });
// specify class name (case sensitive)
$("body p").highlight("YouTube", { className: 'youtube', caseSensitive: true });

将 JavaScript 页面（在正文结束标记之前），以便您不需要使用以下函数：

Include this JavaScript at the bottom of the page (before the body closing tag so that you don't need to use the function below:

$(document).ready(function() {
   // unnecessary if you load all your scripts at the bottom of your page
});

win ！：）

这篇关于将CSS重复应用于特定词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！