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无法提供＆＃34; up＆over＆＃34;。它必须是一种处理包含row的更高级别h1元素的方法。在下面，我假设你有一个班级。在那种情况下：

＆＃13;

/* 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; }

＆＃13;

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

＆＃13;

Answer 2

以下内容应该有效：

＆＃13;

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

＆＃13;

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

＆＃13;

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无法以任何其他方式完成此操作。

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

4 个答案: