不存在类时如何选择选择器

Question

我对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="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>我如何有一种特定的样式来申请<div class="wrapper">BODY</div> <div class="header">HEADER</div>加拿大不存在。 假设要更改BODY的颜色，但不能更改美国的颜色。

我认为用：not（）伪类的选择器是这样的：

:not(.printable) {
    /* Styles */
}

但是，方法是什么？

Answer 1

我不是专业人士，但你可以玩条件类：

<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>

甚至使用可以识别国家/地区并返回相应类别名称的功能。

Answer 2

如果我理解你的问题，兄弟选择器仍然适合你。 您的兄弟选择器（ .header的存在）将是一个覆盖。

所以像这样：

.body .wrapper {
  color: red; // Default color
}
.body .header + .wrapper {
color: blue; // Override default color when sibling exists
}

JSFiddle： https ：//jsfiddle.net/fch3drve/