Question

所以，我有div的{{1}}集合，如My Page。

 <div class="My_Page"> 
    <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
 </div>

然后我有另一个页面，其中包含相同的类= one和two。

 <div class="Your_Page"> 
    <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
 </div>

但是，我尝试根据他们所在的页面将不同的CSS应用于class = one和two。

例如：

My_page： .My_Page .one {width：100％;}
Your_Page： .Your_Page .one {width：50％}

我有一个包含两个代码的css文件。

对于这两个页面，这两个css标记都已加载，我觉得必须有更有效的方法根据它所在的父级css应用不同的div。

或者我做得对吗？

由于

Answer 1

你正确地做到了，CSS非常轻量级，加载未使用的代码并不是太糟糕。但是，如果您觉得有必要这样做，您可以加载特定于页面的CSS文件，然后为所有页面加载一个完整的站点文件。

Answer 2

你正确地做到了 -

.outerclass .innerclass {  }

会将样式更改应用于此特定方案的所有实例。

Answer 3

.page{ ....  //common css for both page one and two}
.page .one{ width:100% .... //common for both  } 
.page .two{ .... //common for both  } 

.My_page .two{ width:50%;}


<div class="page My_page">
   <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
</div>

Answer 4

由于您的外部div有不同的类，您可以使用子选择器执行以下操作：

.My_Page .one {
    color: red;
}
.Your_Page .one {
    color: blue;
}

在该示例中，具有类one的元素只有在属于My_Page类的父元素内时才会为红色。

重新阅读问题后修改：

现在我看到你似乎已经在做这件事了。是的，没关系。你说得对。如果您非常关心样式表的大小，也可以在每个页面上包含不同的样式表。但在大多数情况下，这并不是必需的。

将不同的CSS应用于同一类的有效方法

4 个答案: