1、CSS选择器

 

1.元素选择器 ：p {color:red;}

2.通配选择器：* {color：red;}

3.类选择器  .waring {color: red ; }   选择属性包含waring的所有元素( class="urgennt waring"也可匹配）

4.多类选择器 .waring .urgent {color:red;}  仅选择属性同时包含waring urgent 的元素

5.ID选择器  #waring {color：red；}

6.属性选择器  （1）简单属性选择 ：a [href] [title] {color:red;}

　　　　　　　　　　　　　　　　　选择同时含有href、title属性的所有a元素；

      　　　　  （2）具体属性值选择：a [title="W3Cschool"] {color:red;}

　　　　　　　　　　　　　　　　　选择title属性值为“W3Cschool”的所有a元素，必须与属性值完全一样。

      　　　　  （3）部分属性值选择：p [class~="waring"] {color: red;}

　　　　　　　　　　　　  选择class属性包含waring的所有元素，类同于 .waring {color:red ;}

                                 p [class^="bar"]   选择class属性值以“bar”开头的所有元素

　　　　　　　　　　　　  P [class$="bar"]    选择class属性值以“bar”结尾的所有元素

　　　　　　　　　　　　  P [class*="bar"]    选择class属性值包含子串“bar”的所有元素，可与class=“bargain”匹配

    　　　　    （4）特定属性选择：*[ lang |=" en"] {color :red;}

　　　　　　　　　　　　选择lang属性等于en或者以en开头的所有元素

 7.后代选择器：

        如：h1 em {color:red;}   选择h1 元素的所有后代em 元素（包括子元素、孙元素。。。）

      （1）选择子元素：h1>strong  {color:red; }

　　　　　　　　　　　选择h1下面出现的作为子元素的所有strong元素

      （2）选择相邻兄弟元素：li +li {color:red;}

 　　　　　　　　　　　　　 选择紧接在一个li元素后出现的所有li元素，即选择列表中第二个及以后的列表项，第一个列表项未被选中

 8.伪类选择器：

       （1）链接伪类：a:link {color:red;}   未访问的链接

       　　　　　　　  a:visited {color: red;} 已访问的链接

       （2）动态伪类：可应用到任何元素

        ：focus  指示当前输入焦点的元素

        ：hover 指示鼠标指针停留在哪个元素

        ：active 用户点击链接时

       建议顺序：link——visited——hover——active（否则hover或active的样式会被覆盖掉）

　　 （3）静态伪类： p :first-child {color：red；}

        　　　　　　　选择作为某元素第一个子元素的所有p元素，不是选择p元素的第一个子元素

        （4）根据语言选择：*：lang（fr） {color：red；}

　　　　　　　　　　　　　把所有法语元素变成斜体，类似于*[ lang |=" en"] {color :red;}

　　　　　　　　　　　　　注意：在需要语言特定样式时，最好使用伪类选择器

        （5）结合伪类：

　　　　　　a:link:hover {color：red；}可在同一个选择器中结合使用，顺序不重要

 9.伪元素选择器：

         （1）设置首字母样式： h2 :first-letter {color :red;}

         （2）设置第一行的样式： p:first-line {color：red；}

　　　　　　注：所有伪类元素都必须放在出现该伪类元素的选择器后面

　　　　　　如：p:first-line em是不合法的，应该为p em :first-line

         （3）设置之前和之后元素的样式：

　　　　　　如：h2 : before {content: "{}";}   在h2前加一对大括号

         　　 body：after {content：“the end”；}