时间戳

首页 > 解决方案 > 类不存在时如何选择选择器

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

问题描述

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

<div class="wrapper">BODY</div>所以...我需要一个纯 CSS 解决方案...如果<div class="header">HEADER</div>在加拿大不存在，我该如何申请特定样式。让我们说改变颜色BODY但不是为美国。

我认为使用 :not() 伪类的选择器是这样的：

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

但是，方法是什么？

标签： htmlcss

解决方案

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

所以是这样的：

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

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

推荐阅读