Question

我为具有某种风格的文本字段编写了一个类。该字段显示在网站内的两个非常不同的位置，具有不同的父元素。第二个需要另一个保证金。什么是改变原始margin-top的有效方法，因为我不能使用伪类？

HTML

<div class="some_parent">
  <div class="my_styled_field"></div>
</div>
 .....

<div class="some_other_parent">
  <div class="my_styled_field"></div>
</div>

CSS

.my_styled_field{
    margin-top: 2rem;

}

Answer 1

.some_other_parent .my_styled_field{
margin-top:3em; //what ever you want
}

这是将一些其他样式应用于同一个类的方法，具有不同的父级。

Answer 2

使用CSS类层次结构：

.some_other_parent .my_styled_field {
   margin-top: 2em; 
}

Answer 3

非常确定最有效的方式 - 大部分时间 - 就像最佳性能一样，是在你的第二个styled_field中添加另一个类。

如果您在第二个styled_field中添加另一个类，则只需要1个重排就可以到达它：

.newclass{margin-top:5px;}

使用其他人选择的后代选择器肯定会让性能更差，这意味着浏览器必须递归检查很多元素：

.parent .styled_field

如果由于某种原因不想添加类，那么比子代选择器更好的性能是子选择器：

.parent > .styled_field

在考虑css性能时，请记住，即使我们从左到右阅读，浏览器也会从右向左阅读。

我们会检查图像标记的所有.container元素，浏览器会找到所有图像标记 - 然后检查它们是否在.container中

Answer 4

你可以这样做：

<强> FIDDLE EXAMPLE

.some_parent .my_styled_field{
    width: 3rem;
    height: 3rem;
    margin-top: 2rem;
    background-color: red;
}
.some_other_parent .my_styled_field{
    width: 4rem;
    height: 4rem;
    margin-top: 4rem;
    background-color: green;
}

这样，您可以根据其父元素将样式应用于.my_styled_field。

CSS - 有效地使用类

4 个答案: