如果元素存在,则使用CSS选择器应用css

Question

我有这样的标题,如果存在"banner",我想隐藏我的图像并跨越我的pheader div.使用CSS选择器有一个快速的方法吗？以下是HTML代码.

<header>
  <div id="banner">
    <!-- main content -->
  </div>
  <div class="pheader">
    <div class="user-panel">
      <div id="hey-user" class="d2c-user-panel">
        <img src="../images/defaultHeadshot_lg.png" class="userimg">
        <!-- Hide This -->
        <span class="caret" id="down-arrow"></span>
        <span class="hey-user d2c-header-username"><b>Hello</span>
      </div>
</header>

Answer 1

是.

#banner + .pheader img,
#banner + .pheader span {
display:none;
}

此选择仅适用,如果.pheader是后直接#banner.

您可能会发现此Tutsplus文章很有用:

你必须记住的30个CSS选择器

.pheader {
  padding: 1em;
  background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
  display: none;
}

<header>
  <div id="banner">
    <!-- main content -->
  </div>
  <div class="pheader">
    <div class="user-panel">
      <div id="hey-user" class="d2c-user-panel">
        <img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
        <span class="caret" id="down-arrow">Arrow</span>
        <span class="hey-user d2c-header-username"><b>Hello</b></span>
      </div>
    </div>
  </div>
</header>

值得注意的是,我必须关闭原始HTML结构中的几个div,这些div在您的代码中缺失.