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文章很有用：

The 30 CSS Selectors You Must Memorize

.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在您的代码中缺失。

Answer 2

试试这个。链接https://jsfiddle.net/7bv53xqd/

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

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

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

2 个答案: