2

当只有一次出现时,是否有任何 CSS 选择器(CSS3+ 可以)将某些样式应用于元素?

例如,以下 CSS 规则:

border: 1px solid black;

...仅适用于.info如果在 HTML中仅出现一次.info 。

所以,

<p class="info">This would have a border because there is only one</p>

和,

<p class="info">This would not have a border because there are two</p>
<p class="info">And neither would this</p>

我猜我将不得不以编程方式应用一个额外的类,例如:.single-occurrence或使用 Javascript 计算出现次数?

编辑:

让我澄清一些事情。

当我提到 Javascript 作为我正在尝试做的事情的解决方案时——这并不意味着我会使用它。对于任何不是行为的东西,我都尽量避免使用 JS。所以我不想要一个 Javascript 答案,这非常容易完成——我的问题是关于 CSS 的。

另外,对于那些感到困惑的人:页面上有时只有一个的原因是因为我使用的实际类是:search-result。有时只会有一个结果。但仅仅因为只有一个并不意味着该项目不能是称为search-result的对象类的一部分。在语义上(和逻辑上),当然可以有一个项目的类别。有时,我认为人们应该更多地考虑语义,而不是应用一揽子规则。

4

4 回答 4

4

根据页面的结构,您可能可以使用:only-of-type伪类,如果元素没有相同标签名称的兄弟,则匹配。我认为没有比这更具体的方法了。

于 2012-04-22T07:27:40.753 回答
0

没有针对此的 CSS 解决方案。我会同意你的 JavaScript 想法。如果你要使用 jQuery,你可以使用类似的东西:

$('.info').length

CSS3 伪类列表:http: //reference.sitepoint.com/css/css3psuedoclasses

于 2012-04-21T10:22:23.953 回答
-1

这个解决方案怎么样。

CSS

.info.highlight { border: 1px solid black }

JavaScript(使用jQuery

var $info = $('.info');
if ($info.length === 1) { $info.addClass('highlight'); }

演示:http: //jsfiddle.net/joshdavenport/YdbuB/

于 2012-04-21T10:33:43.357 回答
-3

你好,这是一个语法错误的迟到答案,但如果你使用像 nth 这样的选择器......用一些非常糟糕的编码你可能会得到你的结果

于 2018-07-04T04:25:25.250 回答