类不存在时如何选择选择器
类不存在时如何选择选择器
提问于 2019-03-15 03:57:33
我对CSS的“兄弟选择器”持怀疑态度。
情况是这样的：
如果在某些国家/地区可以显示页眉，但在其他国家/地区不能显示页眉，例如：
<!-- USA page -->
<div class="body">
<div class="header">HEADER</div> <!-- it exists -->
<div class="wrapper">BODY</div>
</div>
<hr>
<!-- Canada page --> <!-- does not have header -->
<div class="body">
<div class="wrapper">BODY</div> <!-- I want to modify this wrapper -->
</div>我不确定这是否可能，因为我不能为<div class="wrapper">BODY</div>创建一个新的样式，只为加拿大，因为它是一个模板，所有国家。
这是一个小树枝模板
<div class="body">
{% if show-header %} <!-- if true show -->
<div class="header">HEADER</div>
{% endif %}
<div class="wrapper">BODY</div>
</div>所以...我需要一个纯粹的CSS解决方案...如果<div class="header">HEADER</div>在加拿大不存在，我如何才能有一个特定的风格来申请<div class="wrapper">BODY</div>。假设要更改BODY的颜色，但不是针对美国。
我认为对于:not()伪类的选择器是这样的：
:not(.printable) {
/* Styles */
}但是，方法是什么呢？
回答 2
Stack Overflow用户
发布于 2019-03-15 04:23:42
我不是twig方面的专家，但您可以尝试条件类：
<div class="body">
{% if show-header %} <!-- if true show -->
<div class="header">HEADER</div>
{% endif %}
<div class="{{ country == 'Canada' ? 'wrapper-canada' : 'wrapper-usa' }}">BODY</div>
</div>或者甚至使用函数来标识国家并返回相应的类名。
Stack Overflow用户
发布于 2019-03-15 07:01:34
如果我理解你的问题，兄弟选择器仍然适用于你。您的同级选择器(.header的存在)将是重写。
所以就像这样：
.body .wrapper {
color: red; // Default color
}
.body .header + .wrapper {
color: blue; // Override default color when sibling exists
}JSFiddle：https://jsfiddle.net/fch3drve/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55171038
复制相关文章
相似问题