CSS-有效地使用类

Question

我已经为具有一定风格的文本字段写了一堂课。该字段出现在网站中的2个截然不同的位置，其父母元素不同。第二个需要另一个边距。什么是更改原始保证顶的有效方法，因为我无法使用伪级？

JS小提琴

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

可以肯定的是最有效的方法 - 大多数时候 - 在最佳性能中，将是在第二个styled_field中添加另一个类。

如果您将另一个类添加到第二个styled_field，则只需要1个回流即可到达：

.newclass{margin-top:5px;}

虽然使用其他选择的后代选择器肯定会更糟，但这意味着浏览器必须递归检查很多元素：

.parent .styled_field

如果您不想出于某种原因添加课程，那么比后代选择器的性能要好：

：

.parent > .styled_field

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

我们将在哪里检查所有图像标签，浏览器查找所有图像标签 - 然后检查它们是否在.container

Answer 3

使用CSS类层次结构：

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

Answer 4

youc可以做到这一点：

小提琴示例

.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。