我有一堆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>
