SCSS / CSS 最接近父选择器
Posted
技术标签:
【中文标题】SCSS / CSS 最接近父选择器【英文标题】：SCSS / CSS closest parent selector 【发布时间】：2014-10-15 18:35:47 【问题描述】：我正在使用具有多种样式的代码库（来自重新设计）。我希望能够在元素上声明 class="v1" 或 class="v2" 以确定要使用的样式。
重要的是，某些页面可能包含具有两种样式的元素，在这种情况下，应用的样式应该是最接近版本的父级。例如，如果 body 是 v1，但 div 是 v2，那么里面的任何样式都应该是 v2。
在 SCSS 中，我可以这样做：
.v1
p
// stuff for version 1 of the styles
.v2
p
// stuff for version 2 of the css
哪种方式可以让我到达那里，但 v2 总是会覆盖 v1，因为它在 CSS 中较低。
例如，以下应该是红色，然后是蓝色，然后是红色，然后是蓝色。但是，它是红色的，然后是蓝色的，然后是蓝色的，然后是蓝色的。
<html>
<head>
<style type="text/css">
.v1 span
color: red;
.v2 span
color: blue;
</style>
</head>
<body class="v1">
<span>Outside</span>
<div class="v2">
<span>Div 1</span>
<div class="v1">
<span>Div 2</span>
<div class="v2">
<span>Div 3</span>
</div>
</div>
</div>
</body>
</html>
有什么好的方法可以做到这一点？
【问题讨论】：
【参考方案1】：编辑
根据 OP 的评论，此答案仅针对 OP 的特定测试用例，并不能完全解决问题。
看看CSS Child Selectors
您之前所做的是告诉页面将 v1 类中的所有内容作为一个跨度并将红色应用于它。子 div 内的跨度都在具有 v1 类的父 div 内。使用子选择器，您可以明确告诉它在特定类中查找 span 的子元素。
以下似乎有效：
.v1 > span
color: red;
.v2 > span
color: blue;
你可以在这里查看这个例子JsFiddle
【讨论】：
我不确定这是否会继续在更深的嵌套中起作用，但确实如此。 jsfiddle.net/gerq2jbq/1 这只适用于这个特定的例子（跨度正好在 .v1 和 .v2 内）。问题更笼统：假设我有两个样式表，用于一个重要的网站，我希望它们适用，但仅适用于两种不同的上下文。我可以使用 SCSS 的所有功能。 我已更新我的答案以反映它不满足所有要求。当我能够提供更好的解决方案时，我会再次编辑。以上是关于SCSS / CSS 最接近父选择器的主要内容，如果未能解决你的问题，请参考以下文章