Question

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

我知道您可以定位原生元素电话号码：第一个孩子但是我可以将它用于div类，例如 .showreel：第一

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

由于

Answer 1

我使用this article from 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>

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

2 个答案: