结合 CSS 类来定位特定页面答案

【问题标题】：combining css classes to target specific pages结合 CSS 类来定位特定页面
【发布时间】：2018-03-08 09:12:04
【问题描述】：

我有一个班级.entry-content，每页都有margin 的30px，我有一个班级.double-outter-wrapper，即first-child，但只有一页或两页。有没有办法只针对具有.entry-content 和.double-outter-wrapper 的页面将margin 更改为0？

【问题讨论】：

您不能根据子元素的存在来修改父元素的样式，如果这是您所要求的。由于您使用的是 WordPress，因此您可以根据页面名称对 .entry-content 进行不同的样式设置，这应该作为一个类包含在您的 body 标记中。
正如@JonUleis 所说，您不能基于其子元素来定位元素，但您可以基于页面来定位它 - WP 将页面/帖子 ID 的类添加到正文（以及一些主题也添加页面slug），因此您可以使用它来定位特定页面中的entry-content
你能用JQUERY试试这个吗：$(".double-outter-wrapper").parent(".entry-content").css("margin","0");跨度>

标签： css wordpress css-selectors

【解决方案1】：

如果您愿意使用 JavaScript，它可能是一个可行的解决方案...如果您在每个页面中包含一个通用的 JavaScript GUI 控制器，您肯定可以处理这个...它就像...一样简单...

if (document.getElementsByClassName('your-conditional-element').length !== 0) {
    document.getElementsByClassName('your-element')[0].style.margin = 0;
}

【讨论】：

【解决方案2】：

想用Jquery实现一样。所以这里第一类的背景颜色是红色。在这两种情况下，它都有一个类two。因此选择类two 并检查其父类one 并将其CSS 更改为绿色。您可以根据需要添加 CSS，例如 margin:0 这是一个例子

$(".two").parent(".one").css("background","green");

.one {
  background:red;
  width:90%;
  height:20%;
  margin:30px;
  padding:20px;
}
.two {
  background:blue;
  width:100%;
  height:100%;
}
.three {
  background:orange;
  width:100%;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  <div class="two three">
    class 1
    </div>
  <div class="three">
    </div>
  </div>
<div class="one">
  <div class="two three">
    </div>
  <div class="three">
    </div>
  </div>
<div class="one">
  
  <div class="three">
    </div>
  </div>
<div class="one">
  
  <div class="three">
    </div>
  </div>

【讨论】：