CSS 结构和规则

• 基本语法

  规则

  选择符

  任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如，

  P { text-indent: 3em }

  当中的选择符是P。

  类选择符

  单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 :

  code.html { color: #191970 }
  code.css  { color: #4b0082 }

  以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，

  <P class="warning">每个选择符只允许有一个类。
  例如，code.html.proprietary是无效的。</p>

  类的声明也可以无须相关的元素:

  .note { font-size: small }

  在这个例子，名为note的类可以被用于任何元素。

  一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。

  ID 选择符

  ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:

  #svp94O { text-indent: 3em }

  这点可以参考HTML中的ID属性:

  <P ID=svp94O>文本缩进3em</P>

  关联选择符

  关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符

  P EM { background: yellow }

  是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。

  声明

  属性

  一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

  值

  声明的值是一个属性接受的指定。例如，属性颜色能接受值red。

  组合

  为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:

  H1, H2, H3, H4, H5, H6 {
    color: red;
    font-family: sans-serif }

  继承

  实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。

  有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。

  注解

  样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

  /* COMMENTS CANNOT BE NESTED */

  伪类和伪元素

  伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。

  伪类或伪元素规则的形式如

  选择符:伪类 { 属性: 值 }

  或

  选择符:伪元素 { 属性: 值 }

  伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:

  选择符.类: 伪类 { 属性: 值 }

  或

  选择符.类: 伪元素 { 属性: 值 }

  定位锚伪类

  伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。

  一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:

  A:link    { color: red }
  A:active  { color: blue; font-size: 125% }
  A:visited { color: green; font-size: 85% }

  首行伪元素

  通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

  P:first-line {
    font-variant: small-caps;
    font-weight: bold }

  首个字母伪元素

  首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

  P:first-letter { font-size: 300%; float: left }

  会比普通字体加大三倍。

  层叠顺序

  当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

  1. ! important

     规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规则会超越读者的。以下是! important 声明的例子:

     BODY { background: url(bar.gif) white;
            background-repeat: repeat-x ! important }

  2. Origin of Rules (Author's vs. Reader's)

     正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

     网页制作者应该小心地使用! important 规则，因为它们会超越用户任何的! important 规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

  3. 选择符规则: 计算特性

     基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

     1. 统计选择符中的ID属性个数。
     2. 统计选择符中的CLASS属性个数。
     3. 统计选择符中的HTML标记名格式。

     最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

     #id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
     UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
     LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
     LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

  4. 特性的顺序

     为了方便使用，当两个规则具同样权重时，取后面的那个。

以下内容转自：http://www.cssk8.com/html/css_Tutorial/201007/21-2425.html　　

如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。 它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。 选择器一样的情况下后面的会覆盖前面的属性。比如： p { color: red; } p { color: blue; } p元素的元素将是蓝色，因为遵循后面的规则。 然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如： div p { color: red; } p { color: blue; } 也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。 一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。 p的特性是1（一个html选择器） div p的特性是2（两个html选择器） .tree的特性是10（1个class选择器） div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器） #baobab的特性是100（1个ID选择器） body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器） 按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。 css优先级的四大原则：写点我自己的总结： 原则一： 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高。 例子1： CODE:

我是多大字号？ 运行结果：.class3{ font-size: 12px; } 例子2： CODE:

我是多大字号？

运行结果：.class3{ font-size: 12px; } 注意：后面的几大原则都是建立在“指定”的基础上的。 原则二： #ID >.class >标签选择符 例子： CODE:

我是多大字号？ 运行结果：#id3 { font-size: 25px; } 原则三：越具体越强大。 解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。 CODE:

我是多大字号？

运行结果：.class1 .class2 .class3{font-size: 25px;} 原则四：标签#id >#id ; 标签.class >.class 上面这条原则大家应该也都知道，看例子 CODE:

我是多大字号？ 我是多大字号？ 运行结果：span#id3{font-size:18px} | span.class3{font-size:18px} 很多人会有这样的疑问，为什么不把这个原则四归入原则一形成： 【 标签#ID >#ID >标签.class >.class >标签选择符 >通配符 】 呢？或者将 “标签.class” 看作多更为具体的 “.class” 从而归入原则二呢？后面我将解答各位的疑惑，这就涉及到CSS的解析规律———这四大原则间也是有优先级的，是不是有些糊涂了？别急，继续 看。 *四大原则的权重 相信很多人都知道上面的四大原则，不要以为知道了这四大原则就能分辨css中那条代码是起作用的，不信？那你5秒内能肯定的知道下面这段代码，测试中的文字的字号吗？ CODE:

我是多大字号？

为了大家方便阅读，我去掉了一些代码。 四大原则的权重就是: 原则一 >原则二 >原则三 >原则四 解释： 首先遵循原则一 有指定开始使用下面的原则，无指定则继承离他最近的定义。 然后开始原则二 1、比较最高优先级的选择符 例子： CODE:

我是多大字号？

运行结果：#id3{font-size:18px} 删掉上面CSS中的前两行可以得出，如果没有最高级别的#ID会寻找.class 即使后面的CSS按照“原则二” 描述的再具体也无法突破原则一。 2、如果两条CSS的如果最高选择符优先级一样，则比较他们的数量 例子： CODE:

我是多大字号？

运行结果:.class1 .class2 #id3{font-size:14px} 3、如果最高选择符级别和数量都一样，则按照原则二比较他们下一级，以此类推。 例子1： CODE:

我是多大字号？

[color=Orange] 运行结果:#id1 .class2 .class3{font-size:14px} [/color] *最高级选择符的位置没有高下之分，论证：[code]CODE:

我是多大字号？

上例中更换3条CSS的先后可以得出，哪条位于最后，哪条起作用。说明他们的级别一样，后面的将覆盖前面的。 *将原则四归入原则二的不合理性，论证： CODE:

我是多大字号？

#id1 .class2 .class3{font-size:12px} 可以看到span#id3并不比#id1高出一个级别。 无结果开始原则三 如果比较结果，选择符从最高级开始都对应，级别上的数量也相同，则开始比较谁更具体。 例子： CODE:

我是多大字号？

#id1 .class2 span{font-size:14px} 当然也可以理解为在原则二层层比较中“少一个层级的样式”，缺少的那个层级没有“层级较多的样式”多出的那个层级的级别高。（绕口令） *将原则四归入原则三的不合理性，论证： CODE:

我是多大字号？

上例中可以看出，如果将原则四并入原则三，将span.class3看作两层，那么应该和.class2 .class3层级一样多，那么应该显示12px,而事实不是这样。 最终对决原则四 如果还分不出结果，则开始原则四的比较： 例子1： CODE:

我是多大字号？

.class1 p.class2 .class3{font-size:14px} 先看是否描述到该元素，再看最高级别的等级和数量（#id>class，html#id>#id），同级级别&数量一致时，再看下一级属性。