Question

在一个项目中，我使用了一个复杂的css文件，其中以这种方式描述了css元素：

.content > .pages .page-content .widgets > h2{
    some attributes...
}

.content > .pages .page-content .widgets > h2 > p{
    some other attributes...
}

DOM结构如下：

<div class = "page-content">
     <div class = "widgets">
         etc...

以这种方式描述了许多元素，它们彼此嵌套。

今天，我需要重新排列这个CSS，以便在页面内容和小部件之间添加一个新的div元素，以便结构变为：

<div class = "page-content">
     <div class = "a new class or no class definition at all">
         <div class = "widgets">
             etc...

是否有一种简单的方法可以在不必修改每个CSS定义的情况下执行此操作，因为有太多的嵌套元素可以查找所有这些元素并且非常耗时......

再次感谢您的明智建议！

Answer 1

你不应该做出改变。

您没有在.page-content和.widgets之间定义直接后裔。

因此，如果.page-content和.widgets之间有1个或100个元素，则无关紧要。只要.widgets在某个阶段是.page-content的孩子，此选择器仍然适用。

Answer 2

根据我的知识，你不需要改变css。仍然 .widgets 将是 .page-content 的孩子，因此这个选择器仍然适合您。

您可以在此处查看有关此内容的更多信息

Refer for more details

嵌套css定义中的css overclassing

2 个答案: