CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（http://www.w3c.org）。
使用CSS，要了解常用的各种选择器。
1.标记选择器：
一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：

每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：

 * {    font-family:Verdada,Arial,sans-serif;   }```
**2.类选择器：**
类选择器的名称可以由用户自定义，属性和值与标记选择器一样，必须符合CSS规范。示例：

class选择器

class选择器1

class选择器2

h3使用class

 任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性即可。

**3.ID选择器：**
ID选择器只能在HTML页面中使用一次，利用HTML标记中的ID属性，有更强的针对性。示例：

ID选择器

ID选择器1

ID选择器2


ID选择器也可以用于多个标记，但因为JavaScript等脚本语言也使用id，如果一个HTML中有两个相同的id标记，会导致查找id时出错，所以一个id最好只能赋予一个HTML标记。ID选择器不支持像class那样的多风格同时使用。

**4.交集选择器：**
交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器。交集选择器是两个选择器连续书写，之间不能有空格。示例：

交集选择器

普通段落文本（蓝色）……

普通标题文本（黑色）……

指定了.special类别的段落文本（红色）……

指定了.special类别的标题文本（绿色）……

上面的代码中，定义了标记的样式，也定义了.special类别的样式，此外还单独定义了p.special用于特殊的控制，而这个p.special中定义的风格样式仅仅适用于

标记，而不会影响使用了.special样式的其他标记。 **5.并集选择器：** 并集选择器，也称为集体声明，是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。示例：

并集选择器

示例文字h1……

示例文字h2……

示例文字h3……

示例文字p1……

示例文字p2……

示例文字p3……

 显示结果中，所有颜色都是紫色purple，字体大小都为15px。 对于网站中的一些小页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有标记都使用同一种CSS样式，可以使用全局选择器“*”，就不用逐个声明了。

** 6.后代选择器**
可以通过嵌套的方式对特殊位置的HTML标记进行声明，把外层标记写在前面，内层标记写在后面，之间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。嵌套示例：   最外层文字中间层文字最内层文字 后代选择器示例：

后代选择器

嵌套使用CSS（红色）标记的方法

嵌套之外的标记（黑色）不生效

 后代选择器的使用很广泛，不仅标记选择器可以这样组合，类别选择器和ID选择器都可以进行嵌套。示例：   .special i{color:red;}   #one li{padding-left:5px;}   td.out .inside strong{font-size:16px;} 三层嵌套的对应HTML为：                  其他内容CSS控制的部分其他内容      
    选择器的嵌套在CSS编写中可以大大减小对class和id的声明，因此在构建页面HTML框架时通常只给外层标记定义class或者id，内层标记能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明。例如一个标记中包含多个标记，而需要对其中某个
单独设置CSS样式时才赋给该
一个单独id或者类别，而其他同样采用“ul li{...}”的嵌套方式设置。
**7.子选择器：**
后代选择器产生的影响不仅限于元素的直接后代，而且会影响到它的各级后代。因此，CSS还规定了子选择器，也就是只对直接后代有影响的选择器，而对以后的多个层的后代不产生作用。子选择器是用>连接。示例：   p>span{      color:blue;   }
**8. 相邻兄弟选择器**：
相邻选择器描述的是页面标记里两个元素左右相邻的关系。示例：   li+li {      color:blue;   } 相邻选择器用+来连接。
**9. 属性选择器：**
  a[link]{      text-decoration:none;   }   input[type="text"]{      width:33%;   }
**10.伪类：**
常用的伪类是基于超链接的a:link、a:visited、a:hover和a:active，分别表示平常的超链接、以点击过的超链接、鼠标移动经过的超链接和激活的超链接样式。 还有3个伪类，分别是first-child、:focus和:lang(n)。

:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child
:nth-last-of-type

**11.伪元素：**
开发者还可以使用伪元素，而不必依赖元素标记来样式化Web文档里的某个项目。示例：      p:first-letter{        font-size:200%;         font-weight:bold;      } 伪元素包括：first-letter、:first-line、:before和:after。可以使用“:first-line”样式化第1行元素：      p:first-line{        font-size:200%;         font-weight:bold;      }

**以上选择器可以总结为下表：**

![692F.tmp.jpg](http://upload-images.jianshu.io/upload_images/1647763-8b58d3b5a9b31afd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**1.属性选择符：**
CSS3中，属性选择符已经构成了非常强大的标记属性过滤体系：

![BEC0.tmp.jpg](http://upload-images.jianshu.io/upload_images/1647763-d05a056b5954e93d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**2.结构伪类选择符：**
可以通过文档结构的相互关系来匹配特定的元素。对于有规律的文档结构，可以减少class属性和id属性的定义。

![767C.tmp.jpg](http://upload-images.jianshu.io/upload_images/1647763-f33c746381439cf8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**3.状态伪类选择符：**
可以设置元素处在某种状态下的样式：

![B745.tmp.jpg](http://upload-images.jianshu.io/upload_images/1647763-5ba5885f724c2991.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**4.伪元素选择符：**
CSS3还有一种伪元素选择符，针对CSS已经定义好的伪元素使用：

![B5C1.tmp.jpg](http://upload-images.jianshu.io/upload_images/1647763-4381ab77a33aed83.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

此文转载
[参考](http://www.hhhttp.com/news/jianzhanjiaocheng/2016/0920/168.html)

css选择器