什么是选择器:每个css样式定义都由两部分组成，形式如下:[code]selector { style；}[/code]{}之前的部分是“选择器”，“选择器”表示{ }中“样式”的目标，即“样式”作用于网页的哪些元素。 基本选择器标签选择器(选择标签名):一个完整的HTML页面是由很多不同的标签组成的，标签选择器就是决定哪些标签使用对应的CSS样式；例如p { color:# 900；字体大小:12px背景:# 090；}ID选择器(# number +ID name): ID选择器可以为用特定ID标记的HTML元素指定特定的样式 根据id选择元素是唯一的，这意味着同一个ID在同一个文档页面中只能出现一次；例如# demoDiv { color:# ff 0000；}类选择器(。+类名):类选择器根据标有“.”的类名进行选择在前面；比如:。demoDiv {颜色:蓝色；}通用选择器(选择统一元素):通用选择器用*表示；例如:* {颜色:绿色；字体大小:12px}组选择器:当几个元素的样式属性相同时，可以一起调用一个公告，元素之间用逗号分隔；如p、h1、span {颜色:红色；行高:20px}#main p，# sider span { color:# 000；行高:26px}使用组选择器会大大简化CSS代码，将多个属性相同的元素组合起来，选择并定义相同的CSS属性，大大提高了编码效率，减小了CSS文件的大小。 层次选择器子选择器(use >: Segmentation):子选择器是指其直接后代，可以理解为作用于子元素的第一个后代；如:p & gtspan{color:红色；}后代选择器(以空格分隔的元素):用于选择特定元素或一组元素的后代，将父元素的选择放在前面，子元素的选择放在后面，中间有空格，如:section span { color:blue；}子选择器和后代选择器的区别:1)子选择器只引用它的直接后代，然后后代选择器作用于所有的后代元素；2)子选择器是通过">"选择，然后通过空格选择代表选择器；兄弟选择器(元素之间用+):除了上面的子选择器和后代选择器，我们可能还想找到两个兄弟中的一个，比如一个标题h1元素后面跟着两个段落P元素。我们希望定位第一个段落P元素，并对其应用样式。 也就是说，我们可以使用邻居兄弟选择器；例如h1+p {颜色:蓝色；}伪类选择器伪类可以应用于链接标签或者少量表单元素，但是表单元素的应用IE不支持，所以一般伪类只会应用于链接的样式。 动态伪类选择器的编写顺序:1)link和visited必须在前面(无顺序，静态伪类选择器)；2)链接和访问只能用于A标签；3)链接和被访问后是焦点4)焦点后是悬停；；5)悬停之后是主动；；伪类选择器first-child:第一个元素 最后一个子元素:最后一个元素 n-child(n):你要选择的元素个数，n的值越大越好。 n-child(-n+m):前m个元素的初始值为0。 n-of-type(n):检查第n个元素。 n-last-child(n):从底部选择第n个元素。负伪类选择器元素名称:not(n)除一个元素外，其他元素添加样式伪元素选择器:所有伪元素选择器必须放在伪元素出现的选择器后面，也就是说伪元素选择器不能跟在任何派生的选择器后面；:first-letter，设置块元素的初始字母样式。还支持将内联元素转换为块元素和内联块元素；P:first-letter { font-size:20px }//选择div元素中所有P元素的首字母或汉字；:first-line:设置第一行文本的样式；. box . main:first-line { color:# F00 }//只有部分属性允许first-line:所有字体属性、颜色、所有背景属性、字距、字母间距、文字修饰、垂直对齐、文字转换、行高:before:设置上一个样式，可以插入生成的内容并设置其样式；正文:在{content:'开始:'；之前；显示:块；}//在body元素前插入文本内容The Start:'并设置为block元素:after:设置样式after，可以插入生成的内容并设置其样式；示例:body:after {content: 'The End。'；显示:块；}//插入文本内容'结尾'body元素的末尾，并将其设置为块元素input::-WebKit-input-placeholder。属性选择器根据元素的属性进行匹配，其属性可以是标准属性，也可以是自定义属性；也可以同时匹配多个属性；格式:元素名称[属性名称+"属性值"]输入[type = "text"]格式:元素名称[属性名称=以属性值开头的内容]选择元素输入[type = " te "]+span { color:red；}格式:元素名称[属性名称$ =属性值末尾的内容]选择元素输入[type $ = "d"]+span {color:以XXX结尾的蓝色；}格式:元素名称[属性名称* =属性值中包含的内容]选择元素输入[type * = " I "]+span { color:green containing XXX；}结论:想学web前台的朋友，需要前台信息的朋友，可以在这里加入学习裙。前面:953，中间:352，最后:883。有各种前台学习资料，前台面试问题的PDF文档，免费参考。不见不散！