Question

当只有一次出现时，是否有任何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。

另外，对于那些感到困惑的人：之所以在页面上只有一个单个类的原因，是因为我使用的实际类是：搜索结果即可。有时只会有一个结果。但仅仅因为只有一个并不意味着该项不能成为被称为搜索结果的对象类的一部分。在语义上（和逻辑上），当然可以有一个项目的类。有时，我认为人们应该多考虑语义，而不是应用一揽子规则。

Answer 1

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

Answer 2

没有CSS解决方案。我会考虑你的JavaScript想法。如果你使用jQuery，你可以使用类似的东西：

$('.info').length

这里的CSS3伪类列表：http://reference.sitepoint.com/css/css3psuedoclasses

Answer 3

这个解决方案怎么样。

CSS

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

JavaScript（使用jQuery）

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

示范：http://jsfiddle.net/joshdavenport/YdbuB/

Answer 4

您好，这是语法错误的最新答案，但是如果您使用nth之类的选择器...编码很糟糕，您可能会得到结果

当只有一次出现时，将CSS应用于元素？

4 个答案: