使用CSS在页面上定位第一个类实例

Question

我有一堆与showreel类的div,我希望第一个具有更高的保证金价值.我正在尝试使用CSS高级选择器来实现这一点,但似乎无法弄明白.

我知道你可以定位像p:first-child这样的原生元素,但是我可以将它用于div类,例如.showreel:first

看了很多,但我只是找到有关原生元素的信息.任何帮助表示赞赏,但宁愿拥有CSS解决方案而不是JS解决方案.

谢谢

Answer 1

我使用CSS-Tricks中的这篇文章来选择类的第一个实例,而不是它的子类.它对我来说非常出色!无需额外的HTML或JS.

.title:nth-of-type(1){
    background-color:red;
}

Answer 2

CSS中不存在此类功能.您将需要使用JS解决方案在客户端计算机上找到它们,或者使用服务器端解决方案将另一个类应用于具有此CSS类的第一个元素.使用哪个取决于唯一地设置此项目的重要性.

使用jQuery,您可以通过以下方式找到该类的第一个实例:

var firstAsJQueryObject = $('.showreel').eq(0);
var firstAsDOMElement   = $('.showreel')[0];

在现代浏览器上使用纯JavaScript:

var firstAsDOMElement = document.querySelector('.showReel');

在旧版浏览器上使用纯JavaScript:

function findFirstElementWithClass(className){
  var hasClass = new RegExp("(?:^|\\s)"+className+"(?:\\s|$)");
  for (var all=document.getElementsByTagName('*'),len=all.length,i=0;i<len;++i){
    if (hasClass.test(all[i].className)) return all[i];        
  }
}
var firstAsDOMElement = findFirstElementWithClass('showReel');

如果你打算使用JavaScript,而不是通过JavaScript应用视觉风格,我建议使用JavaScript应用一个类,并仍然使用CSS来设置元素的样式:

// Using jQuery for simplicity
$('.showreel').eq(0).addClass('first-showreel');

.first-showreel {
  /* apply your presentation here */
}

编辑:请注意@mickey_roy的高得多的答案是不正确的.只有当您想要的类的元素也是页面上其类型的第一个元素时,它才会起作用.

写作.showreel:nth-of-type(1)意味着"找到每个类名的第一个元素,它也showreel应用了类." 如果在没有类的页面上出现相同的元素类型,则它将失败.如果不同的元素类型共享同一个类,则它将失败.

问题询问如何选择类的第一个实例.请参阅下面的示例,了解该问题的答案是多么错误.

div { color:red }
.showreel:nth-of-type(1) {
    font-weight:bold;
    color:green
}

<div>not this</div>
<div class="showreel">this should be green</div>
<div>not this</div>
<div class="showreel">not this</div>
<p class="showreel">not this</p>
<section class="showreel">not this</section>