当只有一次出现时,是否将CSS应用于元素?

当只有一次出现时,是否将CSS应用于元素?,css,Css,是否有任何CSS选择器(CSS3+可以)在只有一次出现时将某些样式应用于元素 例如,以下CSS规则: border: 1px solid black; …仅适用于HTML中仅出现一次.info的.info 所以 这将有一个边框,因为只有一个边框 以及 这不会有边框,因为有两个边框 这也不会 我猜我必须以编程方式应用一个额外的类,比如:。单次出现,或者用Javascript计算出现的次数 编辑: 让我澄清一些事情 当我提到Javascript作为我正在尝试的解决方案时,这并不意味着我要使用它

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

例如,以下CSS规则:

border: 1px solid black;
…仅适用于HTML中仅出现一次.info.info

所以

这将有一个边框,因为只有一个边框

以及

这不会有边框,因为有两个边框

这也不会

我猜我必须以编程方式应用一个额外的类,比如:。单次出现,或者用Javascript计算出现的次数

编辑:

让我澄清一些事情

当我提到Javascript作为我正在尝试的解决方案时,这并不意味着我要使用它。我尽量避免JS,因为这不是行为。所以我不想要Javascript的答案,这非常容易实现——我的问题是关于CSS的


另外,对于那些感到困惑的人:页面上有时只有一个类的原因是因为我使用的实际类是:搜索结果。有时只有一个结果。但仅仅因为只有一个,并不意味着该项不能属于称为搜索结果的对象类。当然,在语义上(逻辑上),可以有一个由一个项组成的类。有时,我认为人们应该更多地考虑语义,而不是应用笼统的规则。

没有CSS解决方案。我同意你的JavaScript想法。如果要使用jQuery,可以使用如下内容:

$('.info').length

CSS3伪类列表如下:

没有CSS解决方案。我同意你的JavaScript想法。如果要使用jQuery,可以使用如下内容:

$('.info').length

CSS3伪类列表:这个解决方案怎么样

CSS

JavaScript(使用)


演示:

这个解决方案怎么样

CSS

JavaScript(使用)


演示:

根据页面的结构,您可能可以使用伪类,如果元素没有相同标记名的同级,则可以使用伪类。我认为没有比这更具体的方法了。

根据页面的结构,您可能可以使用伪类,如果元素没有相同标记名的同级,则可以使用伪类。我认为没有比这更具体的方法了。

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

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

-1。OP表示他正在寻找CSS选择器。他还提到,他知道如果没有,他将不得不求助于JavaScript。您不仅在问题上添加了JavaScript,还添加了jQuery!我的问题是关于CSS,而不是Javascript。谢谢你。OP表示他正在寻找CSS选择器。他还提到,他知道如果没有,他将不得不求助于JavaScript。您不仅在问题上添加了JavaScript,还添加了jQuery!我的问题是关于CSS,而不是Javascript。谢谢你,再一次@事实上,虽然我理解您对过度使用jQuery的担忧,但我建议将此解决方案作为一个选项,以防他已经在使用jQuery。当然,有很多,他可能正在使用,但我并不打算为每一个都发布一个例子。为什么要使用图书馆呢?当然,创建您自己的函数。但所有这些都是OP的特权。再一次@事实上,虽然我理解您对过度使用jQuery的担忧,但我建议将此解决方案作为一个选项,以防他已经在使用jQuery。当然,有很多,他可能正在使用,但我并不打算为每一个都发布一个例子。为什么要使用图书馆呢?当然,创建您自己的函数。但所有这些都是OP的特权。我坚信没有任何解决方案能够满足您问题的要求。CSS在规范或实际实现中都没有提供这种情况。@michaelward82。谢谢,我也这么怀疑。我坚信没有任何解决方案能够满足您问题的要求。CSS在规范或实际实现中都没有提供这种情况。@michaelward82。谢谢,我也这么怀疑。这似乎管用。所以现在,当只有一个搜索结果时,我可以这样设置它:#搜索结果。搜索结果:只有{border:0;}类型的搜索结果才有效。所以现在,当只有一个搜索结果时,我可以这样设置它:#搜索结果。搜索结果:仅为{border:0;}类型
$('.info').length
.info.highlight { border: 1px solid black }
var $info = $('.info');
if ($info.length === 1) { $info.addClass('highlight'); }