如何在元素找到之前选择子元素

Question

我有这样的内容：

<div class="content">

    <div class="row">
        <h1>foo1</h1>
    </div>

    <div class="row">
        <a href="#">foo11</a>
    </div>

    <div class="row">
        <a href="#">foo12</a>
    </div>

    <div class="row">
        <h1>foo2</h1>
    </div>

    <div class="row">
        <a href="#">foo21</a>
    </div>

</div>

如何选择h1标签foo1和foo2之间的链接？

我试过这个：

.content .row > :not(h1) a

但这选择：

<a href="#">foo11</a>
<a href="#">foo12</a>
<a href="#">foo21</a>

而我想要的是：

<a href="#">foo11</a>
<a href="#">foo12</a>

此外，包含div.row的行之后的h1的数量是可变的。

Answer 1

您实际上有一个层次结构，在HTML中没有以分层形式表示。最好的解决方案是在HTML中添加另一个级别来表示层次结构。

如果你不能这样做，并且坚持使用这个HTML，那么你可以试试sibling combinators，但无论如何，你需要一些方法来解决foo1和foo2元素。如果你知道顺序，数据属性或其他任何东西，那可能是一个类，或nth-child。这不能是<h1>元素上的东西，因为CSS没有提供“向上和向上”的方法。它必须是一种方法来处理包含row的更高级别的h1元素。在下面，我假设你有一个课程。在这种情况下：

/* Make everything after `foo1` red. */
.foo1 ~ .row a { color: red; }

/* But make `foo2` and everything after it the original color. */
.foo2.row a, .foo2 ~ .row a { color: inherit; }

<div class="content">

    <div class="row foo1">
        <h1>foo1</h1>
    </div>

    <div class="row">
        <a href="#">foo11</a>
    </div>

    <div class="row">
        <a href="#">foo12</a>
    </div>

    <div class="row foo2">
        <h1>foo2</h1>
    </div>

    <div class="row">
        <a href="#">foo21</a>
    </div>

</div>

Answer 2

以下应该有效：

.content .row:not(:last-child) a {
      background-color: red;
    }

<div class="content">
    <div class="row">
        <h1>foo1</h1>
    </div>
    <div class="row">
        <a href="#">foo11</a>
    </div>
    <div class="row">
        <a href="#">foo12</a>
    </div>
    <div class="row">
        <h1>foo2</h1>
    </div>
    <div class="row">
        <a href="#">foo21</a>
    </div>
</div>

Answer 3

这有点像你在寻找jsfiddle？

for (var i = 0; i < document.getElementsByTagName('a').length; i++) {

 var x=document.getElementsByTagName('a')[i];
 var t=x.innerHTML;

 if (t=='foo11'||t=='foo12') {
   x.style.backgroundColor="red"; }
}

Answer 4

您可以使用变量div来执行此操作：

.content > .first ~ .row > a {color: red}
.content > .second ~ .row > a {color: initial}

<div class="content">

  <div class="row first">
    <h1>foo1</h1>
  </div>

  <div class="row">
    <a href="#">foo11</a>
  </div>

  <div class="row">
    <a href="#">foo12</a>
  </div>

  <div class="row">
    <a href="#">foo13</a>
  </div>

  <div class="row second">
    <h1>foo2</h1>
  </div>

  <div class="row">
    <a href="#">foo21</a>
  </div>

  <div class="row">
    <a href="#">foo22</a>
  </div>

  <div class="row">
    <a href="#">foo23</a>
  </div>

</div>

这里initial关键字将color属性设置为其默认值，并且没有为.row的内部使用h1标记定义额外的两个类，这不能用纯CSS以任何其他方式完成。