我想用逗号分隔文字 - 即关键字如下:
keyword1, keyword2, keyword3, keyword4
如何为每个由逗号分隔的关键字设置黑色样式元素。是否有捷径可寻?文本总是动态的,所以我永远不知道这些关键字到底是什么以及有多少。因此每个关键字都应该有一个框元素。
<span class="keyword-option-black">keyword1, keyword2, keyword3, keyword4</span>
.keyword-option-black {
color:white;
background-size:contain;
margin:10px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background:black;
}
答案 0 :(得分:1)
CSS无法选择文字。
为了突出显示页面上的关键字,您需要使用JavaScript (对于客户端)或PHP (或其他任何服务器端)编程语言< / em>用包装元素包装关键字,该元素具有特殊的CSS样式以区分键。
在这里,我使用jQuery(只是为了演示)实现了上述方法:
<强> Working Fiddle 强>
JS部分:
// Insert the keywords here,
// you can also get the keys automatically from the DOM if needed
var keywords = ['Google', 'Facebook', 'Social'];
$.each(keywords, function(index, key) {
var $content = $('#content'),
text = $content.html();
$content.html(
text.replace(
new RegExp("("+ key +")", 'ig'), "<span class='highlight'>$1</span>"
)
);
});
这是highlight
类:
.highlight {
color: white;
background-size: contain;
margin:10px;
padding:5px;
border-radius: 5px;
background: black;
}
答案 1 :(得分:0)
HTML和CSS是静态的。既然你不知道会有多少个关键词,你需要一些动态的东西。根据实施情况,您可以使用JavaScript或您正在使用的任何后端语言
基本上,您希望围绕每个关键字和样式添加span标记(跨越一个class keyword-option-black)。因此,当您向HTML输入关键字时,在循环中使用<span>keywordX</span>
添加元素,或者在使用JavaScript加载文档时添加这些标记。
希望这会有所帮助。
答案 2 :(得分:0)
使用Django,我是按照以下方式完成的。
<span class="keyword">A</span><span class="keyword">B</span>
。它采用原始视图输出并将其解析为已包含跨度的格式。