Question

我想编写一个CSS选择器，它匹配第一次出现的带有“icon”类的元素。元素没有共同的父元素（如下所示），因此:first-child或:first-of-type伪对我不起作用。

HTML标记不是很好，但是它的规格，所以不可能改变它。

是否有任何CSS解决方案，以匹配元素的第一次出现？

<div>
    <div class="icon"></div> <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

OR

<div>
  <!-- nothing here --> 
</div>
<div>
    <div class="icon"></div>  <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

OR

<div>
  <!-- nothing here --> 
</div>
<div>
  <!-- nothing here too -->
</div>
<div>
    <div class="icon"></div>  <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

Answer 1

不，没有。您必须首先找出哪个父div元素具有.icon个子元素，而您无法使用CSS选择器。 jQuery选择器.icon:first完全符合您的要求，但:first不是CSS的一部分。

Answer 2

我会说你必须使用某种javascript来做到这一点。我实际上只是在自己的项目上完成了这个。

jQuery的：

$('.Icon:first').addClass('myclass'); // or .css('attribute', 'value') depending on what you want.

以上脚本始终只影响它找到的.Icon的第一场比赛。

我知道这不是CSS，但是你只能使用CSS来实现你想要实现的目标。

获得元素的第一次出现，独立于父母

2 个答案: