本片文章主要讲解html5中css选择器，通过选择器定位到想要进行样式设置的元素。当前css选择已经发布到第三代，也就是css3选择器。css3选择器分为：基本选择器，复合选择器，伪元素选择器。
1.1：*代表通用选择器，选择所有元素 1.2：type选择器（元素选择器），选择指定的元素 1.3：id选择器，选择指定id属性的元素 1.4：class选择器，选择指定class属性的元素 1.5：[attr]属性选择器，选择指定attr属性的元素 1.6：s1,s2,s3分组选择器，选择多个选择器的元素 1.7：s1 s2-后代选择器，选择指定选择器的后代元素 1.8：s1>s2子选择器，选择指定选择器的子元素 1.9：s1+s2相邻兄弟选择器,选择指定选择器相邻的元素 1.10：s1~s2普通兄弟选择器,选择指定选择器后面的元素 1.11：::first-line 伪元素选择器，选择块级元素文本的首行 1.12：::first-letter 伪元素选择器，选择块级元素文本的首字母 1.13：::before 伪元素选择器 选择元素之前插入内容 1.14：::after 伪元素选择器 选择元素之后插入内容
在实际编写css样式中使用简单而且频率高的选择器归于基本选择器。
“*”号选择器便是通用选择器，该选择器匹配html元素的所有选择器，包括html和body标签。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> *{ border:1px solid blue; } </style> </head> <body> <p>我是p</p> <b>我是b</b> <br/><br/> <span>我是span</span> </body> </html>运行上面代码你会发现页面有5个边框，通用选择器给所有的html元素的选择器添加边框。声明一点，在实际项目中通用选择器的使用非常少，一般不用。
直接使用元素名称作为选择器就是元素选择器。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> p{ color:red; font-size:20px; } </style> </head> <body> <p>我是p</p> <b>我是b</b> <br/><br/> <span>我是span</span> </body> </html>上面的代码就是使用元素选择器给p元素添加字体颜色样式。凡是p标签其内容字体都是红色并且字体大小为20像素。
id选择器是在html页面中给某一个元素的唯一标识。使用#id值来锁定我们想要的进行css样式的元素。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> #mySpan{ color:blue; font-size: 30px; } </style> </head> <body> <p>我是p</p> <b>我是b</b> <br/><br/> <span id="mySpan" >我是span</span> </body> </html>在实际项目中id选择器的使用频率很高，因为它可以高效准确地锁定某一个元素。
html页面的元素都可以有一属性class,比如下面的
<p class="pClass"></p>解释：给p标签一个class属性，属性值为：pClass.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> .spanClass{ border:1px solid orange; } </style> </head> <body> <p>我是p</p> <b>我是b</b> <br/><br/> <span class="spanClass" >我是span</span> <p>我是p</p> <b class="spanClass">我是b</b> <br/><br/> <span>我是span</span> </body> </html>解释：.class属性值代表类选择器，可以选择多个元素的选择器。 代码中只要元素的class的值为spanClass，都会有一个橘黄色的边框。
匹配属性的选择器：直接使用中括号包含属性名即可。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> [href]{ border:1px solid red; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.aiqiyi.com">爱奇艺</a> </body> </html>上面两个链接都会有边框。 匹配属性值的选择器：[href=”http://www.baidu.com”]{}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> [href="http://www.baidu.com"]{ border:1px solid red; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.aiqiyi.com">爱奇艺</a> </body> </html>两个超链接一个有边框一个没有边框。 属性选择器还有很多扩展和css3新添加的其他属性选择器，在这里只介绍以上几种属性选择器。
将多个选择器用逗号隔开，同时设置一组样式。代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> a,p,span,.myClass{ color:red; } </style> </head> <body> <a href="http://www.baidu.com">超链接</a> <p>p标签</p> <span>span标签</span> <div class="myClass">div标签</div> </body> </html>style样式代码中的就是复合选择器。
后代选择器涉及到html标签中元素的嵌套。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> div b{ color:blue; } </style> </head> <body> <a href="http://www.baidu.com">超链接</a> <p>p标签</p> <span>span标签</span> <div class="myClass"><br> <b>div子元素标签b</b> </div> </body> </html>解释：选择div元素内部所有b元素。不在乎b的层次深度.后代选择器可以混合使用 ID 选择器、类选择器、属性选择器。
css选择器远不止这些。还有很多其他选择器。本片文章只是选择了平常用到的比较多的一些选择器，想要了解更多其他css选择器可以观看本人后续博客。
