对同一网页的不同部分应用不同的 css 样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3298746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply different css stylesheet for different parts of the same web page
提问by C..
I have a web page with different parts which require different css stylesheets to be applied to each. What I would like to know is how to specify which css stylesheet to use for each different part of the web page. if I leave them all together, the components do not get displayed properly.
我有一个包含不同部分的网页，需要对每个部分应用不同的 css 样式表。我想知道的是如何为网页的每个不同部分指定使用哪个 css 样式表。如果我将它们放在一起，则组件无法正确显示。
采纳答案by Ned Batchelder
You can't apply different stylesheets to different parts of a page. You have a few options:
您不能将不同的样式表应用于页面的不同部分。您有几个选择：
The best is to wrap the different parts of the page in divs with class names:
最好是用类名将页面的不同部分包装在 div 中：
<div class='part1'>
....
</div>
<div class='part2'>
....
</div>
Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.
然后在您的第 1 部分 CSS 中，为每个 CSS 规则添加“.part1”前缀，并在第 2 部分 CSS 中为每个 CSS 规则添加“.part2”前缀。请注意，通过使用类，您可以使用多个不同的“part1”或“part2”div，来灵活划分页面的哪些部分受哪些 CSS 规则影响。
回答by Gabriele Petrioli
It is called CascadingStyle Sheets (CSS) for a reason ..
它被称为层叠样式表 (CSS) 是有原因的..
use the specificityrules of CSS to target each section..
使用CSS的特殊性规则来定位每个部分..
ie..
IE..
#section1 a{color:red}
#section2 a{color:blue}
this will make all links inside an element with id section1be red, and all links inside an element with id section2be blue..
这将使 IDsection1为红色的元素内的所有链接，以及 idsection2为蓝色的元素内的所有链接..
<div id="section1">
<a href="#">i will be red</a>
</div>
<div id="section2">
<a href="#">i will be blue</a>
</div>
回答by kapil
An external stylesheet is applied to whole html page. In order to apply different stylesheets to different portions, Firstly,the html page has to be divided into different sections using the html tag ( with each html div to be assigned a unique id or class) Secondly,the external stylesheet to be applied to each div has to be designed according to the id/class assigned to it
外部样式表应用于整个 html 页面。为了将不同的样式表应用于不同的部分， 首先，必须使用 html 标记将 html 页面划分为不同的部分（每个 html div 被分配一个唯一的 id 或类） 其次，要应用于每个页面的外部样式表div 必须根据分配给它的 id/class 进行设计
Example as explained above by Gaby aka G. Petrioli...
上面由 Gaby aka G. Petrioli 解释的示例...
回答by Ahmed Aman
Use different class for each part in your web page and customize the CSS code for each class.
为网页中的每个部分使用不同的类，并为每个类自定义 CSS 代码。
