CSS 选择器用法

1.元素选择器
         p {color:gray;}  h2 {color:silver;}  
2.选择器分组
        h1, h2, h3, h4, h5, h6 {color:blue;}

3. 类选择器

        *.className {color:blue;}  *匹配所有元素，*也可以省略。          
         .className {color:blue;}   匹配所有class为 className的元素。

元素选择器和类选择器（单类和多类）可以结合在一起，p.className {color:blue;} 匹配class为className的 p 元素。  

多类选择器  .important.warning {background:silver;}   class中包含 important 和 warning

    html元素class包含一个词列表：<p class="important warning"> This paragraph is a very important warning.</p>

4. ID选择器

         #IDName{color:blue;}   不同于class，ID在页面中是唯一的，不能重复。所以也没必要和元素选择器结合了。

5.属性选择器

    *[title] {color:blue;}  匹配元素有属性 title 的所有元素。*可以省略，[title] 也是匹配有属性title的所有元素。

    属性选择器和元素选择器可以结合使用  h1[title]{color:blue;} 匹配 元素中有title 属性的h1元素。

   多属性的属性选择器： a[href][title] {color:red;}

   属性值匹配的属性选择器：  a[title="hello"]{color:red;}    = 是属性值完全匹配，~= 是部分匹配  |=  ^=   $=  *=

6.后代选择器

    h1 em {color:red;} 选择 h1 元素的后代元素  em（h1中所包含的所有em元素）。

7.子元素选择器

     只选择某个元素的子元素，而不是任意后代元素。

      h1 > strong {color:red;}  选择h1下面，直接子元素 strong

      复杂例子：   table.company td > p  选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元   素有一个包含 company 的 class 属性。相当于类选择器，元素选择器 ，后代选择器 ，子选择器的结合。

8. 相邻兄弟选择器

    选择紧接在另一个元素后的元素，而且二者有相同的父元素。

    h1 + p {color:red;} 选择 h1 后面相邻的兄弟元素 p

9. CSS伪类

    伪类用于向某些选择器添加特殊的效果，

    伪类的语法   selector:pseudo-class {property: value;}

    p:first-child  1.先找到p的父类，2.再找到这个父类的第一个元素，3.是不是p，如果是p就应用css。

   p > i:first-child  p元素中第一个<i>元素    , 这个和 p > i是不一样的， p>i会选择 p元素中所有子 i，first-child只会选择第一个（长子）！
   p:first-child i    第一个p元素下的所有 i元素

10. CSS伪元素

       p:first-line   p元素中的第一行文本

       :after :before 可以再元素的后面和前面插入内容。