CSS----分类，情景选择，串接

最新推荐文章于 2023-02-26 14:11:33 发布

ply_09070066

最新推荐文章于 2023-02-26 14:11:33 发布

阅读量625

点赞数

分类专栏： CSS 文章标签： CSS 分类情景选择串接

本文链接：https://blog.csdn.net/u010398850/article/details/9763465

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

分类

所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：

P.first { color: green }
P.second { color: purple }
P.third { color: gray }
你的HTML代码如下：

The first paragraph,
with a class name of "first."
The second paragraph, with a class name of "second."
The third paragraph,
with a class name of "third."

你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .）

情景选择：

如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

P B { color: red }

<H1>Emma Thompson, Actress
</H1>
Dramatic actor, inspired
comedienne. Is there nothing
she can't do?

样式表的规则告诉浏览器只将所有之内加重显示的文字以红色显示。所以，之外标题的加重文字不会以红色显示，而之内的文字则是。

串接

屏幕就是一个战场，在一个HTML文件中，如果有3种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。

那么可怜的浏览器该听谁的呢？

好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：

Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）

浏览器将按照上述顺序执行样式表的指令。

但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将以绿色显示，而另一个规则要求以红色显示？

多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序：

使用特别说明的样式表规则，例：
BODY { color: green }
P { color: red }

有一项规则特别说明 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以之内的文字一红色显示。
应用继承的样式表规则
如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。
按照样式表规则在HTML中的显示顺序执行。
P { color: green }
P { color: red }

当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，作为讲座一红色显示，因为它是最后给出的规则。

注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。

最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子：

I { font-family: impact }

I think 
East of Eden is Stein
beck's best novel.

该例中样式表规则要求浏览器使用Impact，但是传统的HTML标签要求用Times字体，一个很明显的传统。

根据正式的样式表规定，应该优先执行样式表规则。

但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉.......

你看到了吧，浏览器不能如我们希望的那样应用串接样式表。节哀顺变吧。