如何检查是否存在多个元素

Question

鉴于此html：

<div id="wrapper">
     <div id="header-holder">
          <div class="header">header 1</div>
          <div class="header">header 2</div>
     </div>
     <div id="project">project data</div>
</div>

我希望仅在.header存在时才将样式应用于#project中的元素。我想用css做这件事。这可能吗？

Answer 1

级联样式表的问题是它们是级联的。它们逐层下来，不会再回来。如果您的结构设置在<div id="project">高于<div id="header-holder">的位置，则可以使用：

div#wrapper #project + #header-holder .header { ... }

但是，如果您无法重构HTML，那么您需要使用javascript。如果您有权访问jQuery，可以尝试以下方法：

$('#wrapper:has(#project) .header').addClass("has_project");

然后在CSS中：

.header.has_project{ ... }