css 选择器分类总结

css 选择器分为以下几种：

1，html元素选择器

以html元素标签名字显示

1 2 3 4 5 6 7

body{ bgcolor:green; }   p{ color: red; }

2,id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。在html主题中，id属性值始终是唯一的

1 2 3 4 5 6 7 8 9 10

< p  id = "red" >这个段落是红色。</ p > < p  id = "green" >这个段落是绿色。</ p >   #red{ color:red; }   #green { color:green; }

3 ，class类选择器

class选择器，以点（.）显示

1 2 3 4 5 6 7

< p  class = "center" > This paragraph will also be center-aligned. </ p >   .center { text-align: center; }

4，派生选择器，（html，id,class属性，都有派生选择器）

1 2 3 4 5 6 7 8 9 10

li strong {      font-style: italic;      font-weight: normal;    }    .center strong {      font-style: italic;      font-weight: normal;    }

5，组合选择器（同时控制多个元素）

1 2 3 4 5 6 7 8 9 10

< h1 >第一天</ h1 > < h1 >第二天</ h1 > < h1 >第三天</ h1 > < h1 >第四天</ h1 >       h1,h2,h3,h4{   font-size: 20px;   color: red;   }

6，伪元素选择器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< a  href = "http://www.baidu.com" >百度连接</ a >    正常连接的样式 a:link{ color: red; } 鼠标放上去的样式 a:hover{ color: blue; } 选择连接时的样式 a:active{ color: yellow; } 已经访问过的样式 a:visited{ color: green; }

7，元素选择器的优先级

id>class>html

      本文转自crazy_charles 51CTO博客，原文链接：http://blog.51cto.com/douya/1840833，如需转载请自行联系原作者