Question

当类嵌套在重复模式中时，我需要替换样式。可悲的是，现在所有的代码都是根据CSS的顺序而不是HTML的顺序来覆盖。

在下面的示例中，每个单词都需要是它命名的颜色。这需要适用于无限数量的嵌套（可能是一个疯狂的大量嵌套），并且还需要在应用其他CSS样式时工作，这意味着无法更改HTML。此外，无法保证这些元素之间不会有任何东西，这意味着它们不会一直是直接父母（因此＆gt;选择器将不起作用）。

任何人都知道如何做到这一点？（或者，如果可能的话？）

span {
    color: black;
}
.foo a {
    color: red;
}
.bar a {
    color: green;
}

<html>
<body>
<span class="foo">
	<span class="bar">
		<span class="foo">
			<span class="bar">
				<span class="foo">
					<span class="bar">
						<strong>black <a href="http://example.org">green</a></strong>
					</span>
					<strong><br>black <a href="http://example.org">red</a></strong>
				</span>
				<strong><br>black <a href="http://example.org">green</a></strong>
			</span>
			<strong><br>black <a href="http://example.org">red</a></strong>
		</span>
		<strong><br>black <a href="http://example.org">green</a></strong>
	</span>
	<strong><br>black <a href="http://example.org">red</a></strong>
</span>
</body>
</html>

Answer 1

通过将类放在类中，在CSS中调用它的正确方法是通过>运算符。

如果CSS是这样的（参见小提琴或以下），将会有一个黄色和绿色元素。这是因为CSS仅在父级/第一级。我在下面添加了一个新的CSS系列，你会看到4个红色元素，因为它只到达第二级CSS。其余的将遵循父元素，因为它们没有任何样式。因此，在CSS中定义样式的最近父项为.bar > .foo a，导致其余3个元素为红色。

span {
    color: black;
}
.foo a {
    color: yellow;
}
.bar a {
    color: green;
}
.bar > .foo a {
    color: red;
}

Html代码：

<span class="foo">
    <span class="bar">
        <span class="foo">
            <span class="bar">
                <span class="foo">
                    <span class="bar">
                        <strong>1black <a href="http://example.org">green</a></strong>
                    </span>
 <strong><br>2black <a href="http://example.org">red</a></strong>

</span> <strong><br>3black <a href="http://example.org">green</a></strong>

</span> <strong><br>4black <a href="http://example.org">red</a></strong>

</span> <strong><br>5black <a href="http://example.org">green</a></strong>

</span> <strong><br>6black <a href="http://example.org">red</a></strong>

</span>

http://jsfiddle.net/de9ppead/

重复嵌套交替风格

1 个答案: