blocks|key|1080152|text|你不能控制你引用的是哪一个，因为规则中的specificity级别相同(例如，两者都是简单的.banner)，最后包含的样式表将获胜。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1080153|它是针对每个属性的，所以如果有一个组合正在进行(例如，一个具有background，另一个具有color)，那么您将获得在这两个属性中定义的combination...if，无论它最后一次出现在样式表中的顺序是什么。|1080154|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/cascade.html#specificity^0|1A|7|K|B|0|0|V|A|1B|5|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can't control which you're referencing, given the same level of <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity" rel="noreferrer">specificity</a> in the rule (e.g. both are simply <code>.banner</code>) the stylesheet included last will win. 

It's per-property, so if there's a combination going on (for example one has <code>background</code>, the other has <code>color</code>) then you'll get the combination...if a property is defined in both, whatever it is the last time it appears in stylesheet order wins.

blocks|key|865641|text|样式表实际上是按照它们在HTML源中出现的顺序连接到单个样式表中的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865642|然后应用normal+rules+for+applying+rulesets+(即，使用定义了给定属性的最后一个规则集的specificity，在平局和!important将扳手投入工作的情况下获胜)|offset|length|865643|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/cascade.html#cascade|1|http://www.w3.org/TR/CSS21/cascade.html#specificity|2|http://www.w3.org/TR/CSS21/cascade.html#important-rules^0|0|4|Y|0|1O|B|1|24|A|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]|$D|W|E|X|1|Y]|$D|Z|E|10|1|11]]|A|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]|P|$5|I|J|K|A|$L|Q]]]]

Style sheets are, effectively, concatenated into a single style sheet in the order in which they appear in the HTML source.

The <a href="http://www.w3.org/TR/CSS21/cascade.html#cascade">normal rules for applying rulesets</a> then apply (i.e. by <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">specificity</a> with the last ruleset that defines a given property winning in the event of a tie and <a href="http://www.w3.org/TR/CSS21/cascade.html#important-rules">!important</a> throwing a spanner into the works)

blocks|key|865729|text|您永远不会引用特定的样式表。文档中的所有CSS规则都在内部融合为一个规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865730|如果两个样式表中的规则都应用于具有相同特性的相同元素，则稍后嵌入的样式表将覆盖先前的样式表。|865731|您可以使用像Firebug这样的元素检查器来查看哪些规则适用，哪些规则被其它规则覆盖。|offset|length|865732|entityMap|0|LINK|mutability|MUTABLE|url|http://getfirebug.com/^0|0|0|6|7|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

You never refer to a specific style sheet. All CSS rules in a document are internally fused into one. 

In the case of rules in both style sheets that apply to the same element with the same specificity, the style sheet embedded later will override the earlier one.

You can use an element inspector like <a href="http://getfirebug.com/" rel="nofollow">Firebug</a> to see which rules apply, and which ones are overridden by others.

blocks|key|865796|text|最后包含的那个将是使用的那个。但是请注意，如果任何规则在第一个样式表中有！重要，则它们将优先。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865797|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The one you include last will be the one that is used. Note however that if any rules has !important in the first stylesheet they will take priority.

blocks|key|865836|text|可以将其视为在HTML页面中引用(“选择”)元素的样式表，而不是反过来。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865837|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Think of it as your stylesheet(s) referring to ("selecting") elements in your HTML page, not the other way around.

blocks|key|865959|text|是的，您可以包含多个样式表，但您需要将它们标记为备用样式表，并为用户提供一些使用JavaScript激活它们的方法--可能是通过单击一个链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865960|要创建备用样式表，请执行以下操作：|865961|<link+type="text/css"+href="nameOfAlterateStyleSheet.css"+rel="alternate+stylesheet"+title="Blue"+/>|code-block|syntax|javascript|865962|接下来，在Javascript文件中创建一个方法，该方法将:+1.加载数组中的所有样式表。2.示例：|865963|function+getCSSArray()
{
var+links+=+document.getElementsByTagName("link");
var+link;
for(var+i+=+0;+i+<+links.length;+i%2B%2B)
{
++++link+=+links[i];
++++if(/stylesheet/.test(link.rel))
++++{
++++++++sheets.push(link);
++++}
}

++++return+sheets;
}|865964|然后使用某种if/else循环遍历数组，该循环禁用您不需要的样式表，并启用您想要的样式表。(您可以编写一个单独的方法或将循环插入到上面的方法中。我喜欢使用onload命令加载带有页面的CSS数组，然后调用printView方法。)|865965|function+printView()
{
var+sheet;
var+title1+=+"printVersion";
for(i+=+0;+i+<+sheets.length;+i%2B%2B)
{
++++sheet+=+sheets[i];
++++++++++++if(sheet.title+==+title1)
++++{
++++++++sheet.disabled+=+false;
++++}
++++else
++++{
++++++++sheet.disabled+=+true;
++++}|865966|最后，在HTML文档中创建用户将激活JavaScript方法的代码，如下所示：|865967|+<a+href="#"+onClick+="methodName();">Link+Name</a>|865968|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

Yes, you can include multiple style sheets, but you need to label them as alternate style sheets and give the user some way to activate them using JavaScript - perhaps by clicking a link. 

To create an alternate style sheet: 

<pre><code>&lt;link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" /&gt;
</code></pre>

Next create a method in your Javascript file that will: 1. Load all the style sheets in an array 2. Example:

<pre><code>function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i &lt; links.length; i++)
{
 link = links[i];
 if(/stylesheet/.test(link.rel))
 {
 sheets.push(link);
 }
}

 return sheets;
}
</code></pre>

Then go through the array using some type of if/else loop that disables the style sheets you don't want and enables the style sheet you want. (You can write a separate method or insert the loop into the method above. I like to use the onload command to load the CSS array with the page, then call the printView method.)

<pre><code>function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i &lt; sheets.length; i++)
{
 sheet = sheets[i];
 if(sheet.title == title1)
 {
 sheet.disabled = false;
 }
 else
 {
 sheet.disabled = true;
 }
</code></pre>

Lastly, create code in your HTML document that the user will activate the JavaScript method such as:

<pre><code> &lt;a href="#" onClick ="methodName();"&gt;Link Name&lt;/a&gt;
</code></pre>

blocks|key|1080583|text|您不能。您指定的最后一个样式表将是html页面将使用的样式表。可以将其视为一个大型的单个.css文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1080584|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can't. The last stylesheet you specify will be the one html page will use. Think of it as a big single .css document.

blocks|key|1080652|text|这里有一个简单的替代方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1080653|1/假设我们有两个css文件，比如my1.css和my2.css。在html文档头中，在具有ID的元素中键入其中一个的链接，例如"demo"：|1080654|​|1080655|2/在html文档头体中定义两个按钮调用两个JS函数：|1080656|选择css1|1080657|选择css2|1080658|3/最后，在JS文件中键入以下两个函数：|1080659|函数select_css1()+{|1080660|document.getElementById("demo").innerHTML+=+''；}|1080661|函数select_css2()+{|1080662|document.getElementById("demo").innerHTML+=+''；}|1080663|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|15|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|16|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

Here is a simple alternative:
1/ Suppose we have two css files, say my1.css and my2.css. In the html document head type a link to one of them, within an element with an ID, say &quot;demo&quot;:

2/ In the html document head body define two buttons calling two JS functions:
 select css1 
 select css2 
3/ Finally, in the JS file type the two functions as follows:
function select_css1() { 
document.getElementById(&quot;demo&quot;).innerHTML = '';
}
function select_css2() { 
document.getElementById(&quot;demo&quot;).innerHTML = '';
}

How would I use multiple CSS stylesheets in the same HTML page where both stylesheets have a banner class, for instance. How do you specify which class you are referring to?

Use multiple css stylesheets in the same html page

例如，如何在同一个HTML页面中使用多个CSS样式表，其中两个样式表都有一个banner类。你如何指定你所引用的类？

问在同一个html页面中使用多个css样式表
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一个html页面中使用多个css样式表EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一个html页面中使用多个css样式表
EN