Question

我在页面之间共享了这个CSS，我想只在它们的一个页面上做一些填充更改，其余的仍然是相同的。

我可以通过为我正在使用的页面创建一个特殊类来实现这一点，但是我想通过在页面中的顶级父级添加条件来询问是否有一种巧妙的方法来处理它？

需要更改：如果页面中的顶级父级有一些id / class name ..请填充顶部：60px而不是30px，否则保持30px

#box-list {
  padding-top: 10px;

  @media (min-width: @screen-md-min) {
    padding-top: 30px;
  }
}

Answer 1

如果我是对的，这将有效。

唯一的条件是父母#box-list的身份为#your-special-page。

#box-list {
  padding-top: 10px;

  @media (min-width: @screen-md-min) {
    padding-top: 30px;

    #your-special-page & {
      padding-top:60px;
    }
  }     
}

Answer 2

试试这样：

 if (".top parent").hasClass("some_class"){

    $("#box-list").css("padding-top", "60px");

 }else{
     $("#box-list").css("padding-top", "30px");
 }

Answer 3

如果我理解你正确，你会尝试生成这样的CSS：

#box-list {
    padding-top: 10px;
}
.special-template #box-list {
    padding-top: 60px;
}

在LESS或Sass中你可以这样写：

#box-list {
    padding-top: 10px;

    .special-template & {
        padding-top: 60px;
    }
}

请注意，&之前会引用整个选择器。因此，如果您有其他级别，您可能会在开始时获得一些有线结果。

在设置css元素时引用parent

3 个答案: