多页CSS——同一元素在不同页面上使用不同样式

Question

多页CSS——同一元素在不同页面上使用不同样式

css

3

我希望能够对第一页的元素进行样式设置，而不会影响到其他页面上相同的元素。

每个元素上都有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>

- user3020047

那么，只需创建一个“homepage.css”文件并仅将其链接到主页如何？然后为所有其他页面链接“design.css”文件。您甚至可以在主页上同时使用两个文件，只需将“homepage.css”文件放在“design.css”文件之后即可覆盖更改。 - Staveven

2个回答

1

你为什么不使用不同的样式表（例如对于其他页面使用general.css，而对于特定页面使用homepage.css）？如果您不想麻烦使用多个CSS文件，可以将类仅声明给您的div，并仍然在CSS中使用它进行区分。只是一个例子：

<style>
   span {
      background-color: red;
  }

  div.homepage span {
    background-color: blue;
  }
</style>

<div>
  <span>span in normal div</span>
</div>
<div class="homepage">
  <span>span in special div</span>
</div>

- jstarick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jaqen H'ghar · Accepted Answer

有更好的替代方案。

给页面加上一个类，并使用后代选择器：

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