Question

我需要选择'inner'类的第一个匹配项并在其上应用css。我试过：第一个孩子和：第一个类型，但有些事情是不正确的。请帮忙。我正在寻找的是像

.inner:first-occurrence

我尝试了以下和其他类似的组合 -

.outer:nth-child(1) .inner:nth-child(1){}
.outer:nth-child(1) .inner:first-child{}
.outer:nth-of-type(1) .inner{}
.outer:nth-child(1) .inner:nth-of-type(1){}
.inner:first-of-type(){}
.row .inner:firs-of-type{}
.row .inner:first-child{}

HTML

<div class="row">
  <div class="outer col-xs-9">
    <div>some text 1</div>
    <div class="inner">
      ... --select this-- 
    </div>
  </div>
  <div class="outer col-xs-3">
    <div>some text 2</div>
    <div class="inner">
      ...
    </div>
  </div> 
</div>

Answer 1

如@Gerard所述，您可以使用

.outer.col-xs-9 .inner { }

这是有效的，因为第一个.outer元素也有.col-xs-9类。如果要选择第一个.inner元素的.outer元素而不考虑其他类，可以使用

.row .outer:first-child .inner { }

:first-child伪类表示一组兄弟元素中的第一个元素。你拥有的.inner元素不是兄弟元素，但他们的父母是兄弟姐妹。

.inner {
  color: blue;
}

.row .outer:first-child .inner {
  color: red;
}

<div class="row">
  <div class="outer col-xs-9">
    <div>some text 1</div>
    <div class="inner">
      I should be red
    </div>
  </div>
  <div class="outer col-xs-3">
    <div>some text 2</div>
    <div class="inner">
      I should be blue
    </div>
  </div> 
</div>

如何在页面上为css选择第一次出现的内部类？

1 个答案: