我有这样的内容:
<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
的数量是可变的。
您实际上有一个层次结构,在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>
以下应该有效:
.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>
这有点像你在寻找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"; }
}
您可以使用变量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以任何其他方式完成。