我正在使用一个具有多种样式的代码库(来自重新设计)。我希望能够在元素上声明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>
做这件事的好方法是什么?
2条答案
按热度按时间0qx6xfy61#
编辑
根据OP的评论,此答案仅针对OP的特定测试用例,并没有完全解决问题。
看一看CSS子选择器
您之前所做的是告诉页面获取v1类中作为span的所有内容,并将其应用为红色。子div中的span都在具有v1类的父div中。使用子选择器,您专门告诉它在特定类中查找span的子元素。
以下方法似乎有效:
您可以在JsFiddle查看此示例
rjee0c152#
我建议在这里使用CSS变量/自定义属性,例如