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

我有一堆divs与showreel类,我想要第一个具有更高的边际价值.我试图使用CSS高级选择器来实现这一点,但似乎无法弄清楚.

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

看了很多,但我只是找到关于本机元素的信息.任何帮助赞赏,但宁愿有一个CSS解决方案与JS解决方案.

谢谢

解决方法

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将页面上的第一个类实例定位

解决方法

相关文章