仅当文本等于X时才应用CSS

singuerinc 发表于 Dev

辛格灵

我有这样的链接：

<h1>
    <a href="#">Title 001 - Stuff</a>
</h1>

我只想设置“ Title 001”的样式。可以创建一个CSS规则来做到这一点吗？我不记得我过去的表现，我认为是这样的：

h1 a[text="Title 001"]

但这行不通

然后...我想知道是否可以使用“标题XXX”来实现，其中XXX是动态数字。

桑普森

属性中的内容重复

如果您想避免使用JavaScript，则可以在实际属性中复制内容（gasp），然后根据该属性进行选择：

<a href="#" data-content="Title 001 - Stuff">Title 001 - Stuff</a>

然后选择以“ Title”开头的任何内容：

a[data-content^="Title"] {
    color: red;
}

手动测试textContent

另外，您必须采用JavaScript的方法：

var links = document.querySelectorAll( "a" );
var pattern = /^Title\s\d{3}/;

for ( var i = 0; i < links.length; i++ ) {
    if ( pattern.test( links[ i ].textContent ) ) {
        links[ i ].classList.add( "distinguish" );
    }
}

这只是一个如何.distinguish向所有匹配元素添加类的示例。

用jQuery过滤

如果您使用的是jQuery（或类似的实用程序），则无需过多的冗长即可完成此操作：

$("a").filter(function () {
    return /^Title/.test( $(this).text() );
}).addClass("distinguish");

隔离“标题：数字：”

如果您只想隔离Title XXX部分并设置其样式，而又无权访问源模板，则也可以使用JavaScript来做到这一点：

$("a").html(function ( index, html ) {
    return html.replace(/(Title \d+)/, "<span>$1</span>");
});

以上假设您使用的是jQuery，但如果您使用的不是jQuery，则可以使用以下命令完成相同的操作：

var anchors = document.getElementsByTagName("a")
  , length = anchors.length
  , el;

while ( length-- ) {
    el = anchors[ length ];
    el.innerHTML = el.innerHTML.replace(/(Title \d+)/, "<span>$1</span>");
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。