Question

如何在css文件中添加父类

sourcse css

.pagination {
   font-size: 10px
}
a {
   font-size: 30px
}
...............

得到这样的东西

.parent-class {
   .pagination {
        font-size: 10px
   }
   a {
     font-size: 30px
   }
   ...............
}

应该会有很多自动换行

Answer 1

您拥有的结构是sass / scss / less。

在css中，您可以这样做： -

.parent-class .pagination {
        font-size: 10px
}
.parent-class a {
     font-size: 30px
}
...............

编译sass / scss / less后，会生成上面的css结构。

Answer 2

根据我的说法，普通的css是不可能的，你必须使用LESS ...
使用单独的类，以便可以在任何地方重复。

无论如何，<a>的CSS将适用于所有地方，只留下的是.pagination类，所以只需应用

Answer 3

.parent-class .pagination{
   font-size: 10px
}
.parent-class .pagination > a {
   font-size: 30px
}

Answer 4

试试这个：

.parent-class .pagination {
    font-size: 10px
}
.parent-class .pagination a{
    font-size: 30px
}

Answer 5

如果您想要以下HTML代码

<div class="parent-class">
    <div class="pagination"></div>
    <a>Example with font-size 30px</a>
</div>

您需要以下CSS类：

.parent-class { /* define parent class properties here */ }
.parent-class .pagination {
    font-size: 10px
 }
 .parent-class a {
    font-size: 30px
 }
 ...............

注意：在这种情况下，带有.pagination类和“a”-tag的div的位置并不重要。无论它们位于.parent-class div中的哪个位置，它们都会受到您定义的CSS规则的影响如果你想要一个只与子元素匹配的选择器，当它们是这个元素的DIRECT后代时，你需要这样的东西：

.parent-class { /* define parent class properties here */ }
/* '>' selects all elements with .pagination class, which have a parent element with class .parent-class */
.parent-class > .pagination {
    font-size: 10px
 }
 .parent-class > a {
    font-size: 30px
 }
 ...............

如何在css文件中添加父类？

5 个答案: