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

【问题标题】：Getting the first occurence of an element, independent of parents获得元素的第一次出现，独立于父母
【发布时间】：2011-08-22 17:22:11
【问题描述】：

我想编写一个 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>

或

<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>

或

<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>

【问题讨论】：

如果你可以添加一些js代码，那么你可以用它来改变元素的样式。否则，如果不以某种方式更改 html 本身（例如向第一个图标添加 id 或其他方式），我看不到这样做的方法。
可能也相关：stackoverflow.com/questions/2717480/…

标签： html css css-selectors

【解决方案1】：

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

【讨论】：

嗯，问题更多在于导航.icon 元素的层次结构，而不是找出哪些divs 有.icons，但你明白了...
这种设置是不可能的，我接受。我们现在在容器 div 上“加载”了一个类，当它获取内容时。现在可以使用这样的选择器：“div.loaded:nth-of-type(2) .icon”

【解决方案2】：

我会说您必须使用某种 javascript 来执行此操作。实际上，我只是在自己的一个项目中完成了这项工作。

jQuery:

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

上述脚本始终只会影响它找到的.Icon 的第一个匹配项。

我知道这不是 CSS，但仅使用 CSS 并不能真正做到你想要实现的目标。

【讨论】：