css - 多页 CSS - 每个页面中相同元素的不同样式

Question

我希望对 1 个页面上的元素进行样式设置，并且不影响另一个页面上的相同元素。

我在每个元素上都有 class="homepage"。

有更好的方法吗？

为简单起见，这里是该页面上的 DIV。

h1.homepage, p.homepage, li.homepage {
  margin-left: 200px;
}
p.homepage, li.homepage {
  font-size: 20px;
}   

<div>
    <h1 class="homepage">Angular 2 with TypeScript for Beginners</h1>
    <br> 
    <p class="homepage">This project teaches what single page applications (SPA) are and how to build them.</p>
    <p class="homepage">This is a real-world application. A Single Page Application with 2 pages.</p>
    <ul class="homepage">
        <li class="homepage">Page 1 - is a list of customers from a RESTful api with CRUD operations.</li>
        <li class="homepage">Page 2 - is a list of posts from a RESTful api with pagination and search opeartions as well as master/detail views</li>
    </ul>
    <br>      
    <p class="homepage">Angular 2 is the next big thing. It's one of the leading frameworks for building modern, scalable, cross-platform apps.</p>
    <p class="homepage">It’s a leading framework for building JavaScript heavy applications. Often is used in building Single Page Applications (SPA). In a standard web app, when we click on a link, the entire page is reloaded. In SPA, instead of reloading the entire page, we replace the view that is in the content area with another view. It also keeps track of history so if the user navigates using back and forward buttons, we reinsert the application in the right state. This is a fast and fluid experience. Gmail is an example of a SPA.</p>      
    <br>  
    <p class="homepage">TypeScript is a superset of JavaScript, meaning any valid JavaScript code is valid TypeScript. TypeScript brings many useful features to JavaScript that are missing in the current version of JavaScript. We get classes, modules, interfaces, properties, constructors, access modifiers (e.g. public/private), IntelliSense and compile-time checking. So, we can catch many programming errors at compile-time.
    </p>
    <p class="homepage">Angular 2 is written in TypeScript. Plus, most of their documentation is in TypeScript. And for that reason, TypeScript will be the dominant language in building Angular 2 apps.
    </p>
</div>

Answer 1

有更好的选择。

用类包围页面并使用后代选择器:

.homepage h1, .homepage p, .homepage li
{
  margin-left: 200px;
}

.homepage p, .homepage li
{
  font-size: 20px;
}   

<div class="homepage">
    <h1>Angular 2 with TypeScript for Beginners</h1>
    <br> 
    <p>This project teaches what single page applications (SPA) are and how to build them.</p>
    <p>This is a real-world application. A Single Page Application with 2 pages.</p>
    <ul >
        <li>Page 1 - is a list of customers from a RESTful api with CRUD operations.</li>
        <li>Page 2 - is a list of posts from a RESTful api with pagination and search opeartions as well as master/detail views</li>
    </ul>
    <br>      
    <p>Angular 2 is the next big thing. It's one of the leading frameworks for building modern, scalable, cross-platform apps.</p>
    <p>It’s a leading framework for building JavaScript heavy applications. Often is used in building Single Page Applications (SPA). In a standard web app, when we click on a link, the entire page is reloaded. In SPA, instead of reloading the entire page, we replace the view that is in the content area with another view. It also keeps track of history so if the user navigates using back and forward buttons, we reinsert the application in the right state. This is a fast and fluid experience. Gmail is an example of a SPA.</p>      
    <br>  
    <p>TypeScript is a superset of JavaScript, meaning any valid JavaScript code is valid TypeScript. TypeScript brings many useful features to JavaScript that are missing in the current version of JavaScript. We get classes, modules, interfaces, properties, constructors, access modifiers (e.g. public/private), IntelliSense and compile-time checking. So, we can catch many programming errors at compile-time.
    </p>
    <p>Angular 2 is written in TypeScript. Plus, most of their documentation is in TypeScript. And for that reason, TypeScript will be the dominant language in building Angular 2 apps.
    </p>
</div>