html - 将不同的 css 应用于同一类的有效方法

Question

所以，我有一个 div 的集合，如下所示用于 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。

例如:

1. 我的页面: .My_Page .one{width:100%;}

2. 你的页面: .Your_Page .one{width:50%}

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

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

还是我做得对？

谢谢

Answer 1

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