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="body">
  {% if show-header %} <!-- if true show -->
    <div class="header">HEADER</div>
  {% endif %}
  <div class="wrapper">BODY</div>
</div>

所以...我需要一个纯粹的CSS解决方案...如果<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/

班级不存在时如何选择选择器

2 个答案: