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”；}