CSS样式选择器及优先级

My first blog！！ 此blog用于记录和巩固自己学习成果。

自学前端到现在有一断时间了。 对HTML和CSS的基础知识有了一些简单的理解。虽然到现在为止自学的还算比较顺利，并且能够按照自己的学习计划一步一步的前进，但是前路漫漫，web前端的知识点非常庞杂，肯定需要更多的努力。 自学css了两天，已经对各种样式选择器和属性、属性值、盒模型等有了非常初步的了解，还远远达不到基础入门的程度。 斯认为，对样式选择器的合理选择以及优先级的理解要远远重要于属性及属性值的记忆。前者需要的是基础的逻辑思维和一定的全局把握能力；后者是简单的记忆能力，多看多写多试验慢慢地也就掌握了。
掌握好样式选择器的选择以及优先级的划分，可以使将来的css样式更加简洁和易于维护。

<1>， css样式选择器的种类大体分为六种。 

              1， html标记选择器。

             2， id选择器。

              3， 类选择器。

              4， 组合选择器。

               5， 关联选择器。

             6， 伪类选择器。 

      1， html标记选择器是指用html的标记语言作为选择器。 例如  body，p ， b， h1-h6， ul， ol，li， div，blockquote， a 等等。 选择器样式是：“标记语言”　｛｝，　如：　

　　　ｐ　｛｝、　ｂ｛｝、　ｈ1 { } 等等。 

       2， id选择器是指用指定的id name作为选择器。 例如 如果要选择id=“one”的元素，选择器就是： #one { }。 

      3， 类选择器是指用一个类（class）的name来作为选择器。 例如，b元素和p元素都被归为“two”类（class=“two”）的话，选择器就是： .two { }  /* 不能忘记前面的小点*/

       4， 组合选择器，顾名思义就是把多个元素组合在一起选择。  例如，如果p元素和b元素 h1元素都需要用相同的样式的话，

                                 选择器就是： p, b , h1 { }                    /*标记之间用逗号*/

     5,  关联选择器，是指用两个多个标记进行特定的选择。

            例如，p元素里面有a元素，p元素之外也有a元素，想特定选择p里面的a元素的话 就可以写选择器：ｐ a { }      /* 中间用空格隔开*/

       6， 伪类选择器。 伪类只用于a元素和p元素。 例如用 a :link or a :visited or a :hover or a :active  或者p :first-letter p :first-line 等等。

             注： 在写a伪类的css样式的时候是有顺序的，hover只能用在link和visited之后，active只能用在hover之后。 

<2>  样式选择器的优先级。 可以用“000”的方法来计算选择器的“特定性”。 

      1，   在单个标签的选择器中：id选择器的优先级最高，其次是class类选择器，再然后才是标签选择器。

   <h1>这是h1标题文本</h1>

   <p id="one" class="two">这是段落文本</p>

   <p class="two">这是段落文本</p>

   <p class="two">这是段落文本</p>

   <p>这是段落文本</p>

   <p>这是段落文本</p>

以上是一段html里面的标记。 

<style type="text/css">

       p{
     color:red;
      font-size:1cm;
     }
#one {
      color: blue;
      font-size:2cm;
  }
.two {
      color: yellow;
      font-size: 1.5cm;
  }

      </style>

这是相应的css样式部分。 第一个p元素的id被命名为“one”并且被归类为“two”类以后，即使同时应用p和类的选择器，最后浏览器显示的字体颜色和字体大小效果也是id选择器为准。另，根据层叠原理， 如果在p选择器内添加 background-color属性值，而且id选择器和类选择器都没有添加此属性值的话，最后显示效果为所有的p元素都显示p选择器的背景色效果。

  2， 当选择器有多个标记的时候，特定性的值的确定就比较复杂了。但是可以用上述的“000”比较法。 

 例如，当选择器中包含一个标记语言时，特定性为001。当选择器中包含一个类的时候，特定性为010。 当选择器中包含一个id的时候，特定性为100。虽然这三个数字可以用十进制的方法读出来并比较其大小，但是特定性的值却不是十进制，是无数进制。一个id选择器大于无数个类选择器和标记语言选择器的总和。

   例如， 选择器 p .two中有一个类（two）和一个标记语言（p），那么特定性的值就是011。 

                选择器 p #one中有一个id（one）和一个标记语言（p），那么特定性的值就是101。

              同理，可得出  p，h1， a{ } 选择器的特定性的值就是003 （因为此选择器中有三个标记语言）

具体事例说明优先级。

  第一个例子：

     p {
   backgound-color: white;

  }

   p,a,h1{
     color:red;
      font-size:1cm;
  background-color:gray;
       }

       可以看出，在这个css样式中有两个选择器，一个单独的p选择器，还有个组合选择器p，a，h1（都是标记语言选择器）。当共同使用的时候，浏览器还是显示p，a，h1,选择器的效果。因为后者的特定性值是003， 而前者是001。（而且这个例子中的两个选择器互相调换先后位置，浏览器效果还是选择组合的选择器效果。）

第二个例子：      

      .two

                  {

                   background-color:blue; 

                   }

                 p，a，h1, {
                                   color:red;
                             font-size:1cm;
                     background-color:gray;
                               }

 即使two类的元素包含在p元素中，但是类的优先级要高于标记语言。所以最后的浏览器显示效果中，two类的背景色还是按照two选择器为准。但是根据层叠原理：two类的字体大小和字体颜色依然按照p，a，h1选择器来显示，因为.two没有规定这些。 

第三个例子：

        .two
     {
       background-color:blue;
}
#one 
   {
   background-color:purple;
}
当css选择器为上述两个时， 下面的html将会如何显示效果？ 当然是第一个p原色为紫色背景，第二个p是蓝色背景。原因在上面有。 

      <p id="one" class="two">这是段落文本</p>

      <p class="two">这是段落文本</p>

当然上面都是说的一些很简单的情况，远不能说全面掌握。

例如 1，  !important是无条件优先级，享有最高优先级，但是IE6不支持此属性。 

         2， 直接在html给元素添加style的优先级位于第二高。 

             3， 最低一级的是用通配选择器。 *{ }。

当比较拥有相同级别的选择器的时候，定义的位置将决定一些。 

例如 1， 位于head标签的里的style中定义的css样式拥有最高级优先权。

         2， 位于style标签中的@import 引入样式表有第二位优先权。

         3 ， link标签引入的样式表有第三级优先权。

        4，  link标签引入的样式表内的@import引入样式有第四级优先权。

        5， 用户设定的样式为第五级优先权。

        6， 浏览器默认样式为最低级优先权。