Question

我有这段代码：

<div class="main">
	<div class="div1">
		<div>
			<p>
				<a href="#"></a>
			</p>
			<span></span>
		</div>
		<p>Loremp Loremp</p>
		<p>Loremp Loremp</p>
		<a href="#">Loremp Loremp</a>
		<span>Hello World</span>

	</div>

	<div class="div2">
		<p>Loremp Loremp</p>
		<p>Loremp Loremp</p>
		<a href="#">Loremp Loremp</a>
		<span>Hello World</span>
	</div>
</div>

如果div1没有应用div2，我有什么方法可以定位div1的所有元素吗？

我想要做的是使CSS代码非常简单，而不必逐个定位/*I want to make something like that but without affecting the div2*/ *{ color: blue; }的每个元素。

{{1}}

Answer 1

刚刚放

.div1 * {
 color: blue;
}

甚至更好，只是

.div1 {
 color: blue;
}

在我的第一个代码块中，类div1的元素的所有子元素都将应用color: blue。

在第二个代码块中，只有类div1的元素将应用color: blue，但所有子元素也将继承它（除非它们覆盖它）。因此效果应相同。

Answer 2

首先，否：使用.div1 *最终会让你陷入困境。

最好将样式应用于.div1 {...}并依赖继承。

如果您有div1中的文本，那么您不想设置样式，则可能需要将样式应用于div1的{direct]子节点：.div1 > * {...}。从这一点上依靠继承。

任何更具体的内容（例如顶部提出的示例）都会产生意想不到的副作用，并且会让您开始越来越多地提高选择器的特异性。
引导.div1 p ul li .foo div span.bar {...}之类的内容并用.div1 p ul li .foo div span.bar * {...}覆盖它等等。（戏剧）

如果您的问题是标记中的链接，您可以考虑对链接标记进行通用的“重置”/修改，以便它们更好地适应周围的文本：sth。等。

a,
a:active {
    color: inherit;
}

并且您可能希望将此限制为特定的上下文，例如.main

修改

好的，P.Lionel，这是另一回事;我同意。
使用.someSliderPluginClassName * { box-sizing: border-box }是实现此快速简便的合适方式，并且风险可控。

您正在使用.container（如评论中所示）作为此滑块插件元素的上下文类型，并对此插件进行全部控制。（几乎）在这种情况下你无需处理/风格。

另一方面，您可以考虑将样式迁移到box-sizing: border-box。伊莫。它是更好，更一致的拳击模型，越来越多的插件（和css框架）依赖于它。

我知道，现在这是一种努力，但它可能在未来得到回报。 只需5美分。

Answer 3

您可以使用CSS选择器，其中包含您为HTML中的div属性指定的类的名称。

.div1 {
   color: blue;
}

提示：避免在CSS中使用通用选择器（例如.div1 * {。即使它有negligent performance overload，它也可以have impacts you are not accounting for，除了QTimer::singleShot 3}}可用。

Answer 4

您可以使用此选择器匹配所有孩子：

.div * {

}

或者如果您想匹配特定的元素类型：

.div * p {

}

请参阅：https://www.w3.org/TR/CSS21/selector.html#descendant-selectors

Answer 5

默认情况下继承了属性color。这意味着您只需要在父元素上设置此属性，然后所有子元素将自动继承它。

.div1{
 color: blue;
}

将CSS应用于特定div的所有元素

5 个答案: