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

我有一个与showreel类的div系列，我希望第一个有一个更高的利润值。我试图使用CSS高级选择器来实现这一点，但似乎无法理解

我知道您可以针对本地元素，例如 p:第一个孩子 但是我可以在div类中使用它吗。 .showreel:第一

环顾四周，我只找到了关于原生元素的信息。感谢您的帮助，但更愿意使用CSS解决方案而不是JS解决方案

---

谢谢

CSS中不存在这样的功能。您将需要使用JS解决方案在客户端计算机上查找它们，或者使用服务器端解决方案将附加类应用于此CSS类的第一个元素。使用哪一个取决于此项的独特样式有多重要

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

var firstAsJQueryObject=$（'.showreel'）.eq（0）；
var firstAsdElement=$（'.showreel'）[0]；

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

var firstAsDOMElement=document.querySelector（'.showReel'）；

在旧浏览器上使用纯JavaScript：

函数findFirstElementWithClass（类名）{
var hasClass=new RegExp（（？：^ | \\s）“+className+”（？：\\s |$）”；
对于（var all=document.getElementsByTagName（'*'），len=all.length，i=0；i我用来选择类的第一个实例，而不是它的子实例。它对我来说非常有效！不需要额外的HTML或JS

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

@KeokiZee也许我误解了这个问题，但我很确定
第一个孩子
不是问题的解决方案。因为，它肯定不会帮助您“选择第一个类实例”.对，CSS第一个子类在您链接到的情况下不起作用，因为伪类相对于其父类而不是页面起作用。如果这是问题的目的（页面上的第一个实例），你的解决方案是完美的。很抱歉，我似乎确实误解了这个问题，你是对的，你的解决方案是正确的。请澄清你的问题：你真的只是在寻找每一个申请该课程的第一个孩子，还是你（正如我推断的那样）在整个文档中寻找该类的第一个实例，不管它是否恰好是父元素的第一个子元素？我几乎高估了这一点，但在IE8中它并不好。我知道我们都希望web向前发展，但IE8仍然被广泛使用，并将在未来几年继续使我们的生活变得困难。这个答案是有用的l、 但我认为这不应该是可接受的答案，因为它不会回答没有目标类的前面div元素的数量未知的情况。例如，
需要更新到类型（2）的第n个
，依此类推。@fazy-但OP声明目标类是已知的。因此，这是一个完全可以接受的解决方案，在我看来应该是可接受的答案。将JS排除在外，只显示IE8及以下版本的非样式版本。此答案不正确。有关原因，请参阅对我答案的编辑。使用
nth类型
 对于有超出问题要求的额外限制的特定情况，这可能是一个可接受的解决方法。此答案不正确。仅在以下情况下才有效。标题也是文档中其类型（div、p、h1、span等）的第一个。因此，当它似乎起作用时，这是偶然的。