我这里就简单举例9种常用选择器：
1、通配符选择器
说明：为页面上的所有元素设置样式。优先级最低。
*{ margin:0; padding:0; }
2、元素选择器
说明：也叫标签选择器，根据元素名（标签名）来设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ width:200px; height:auto; color:red; } div{ width:100px; height:100px; background:blue; } </style> </head> <body> <p>web前端开发工程师</p> <div> Java开发工程师 </div> </body> </html>
3、类选择器
说明：为含有相同类名的元素设置样式，元素选择时，需要在元素之前加“.”号。
<style> .s1{ color:red; } </style> <body> <p class='s1'>aa</p> <p class='s2'>bb</p> <p class='s1 s2'>cc</p> <!----aa和cc的字体颜色为红色----> </body>
4、ID选择器
说明：#ID名{属性名：属性值；属性名：属性值}，ID选择器具有唯一性
<style> #d1{ color:red; } </style> <body> <p id='d1'>aa</p> <p id='d2'>bb</p> <!----aa的字体颜色为红色----> </body>
5、属性选择器
①简单属性选择器：选择具有某个属性名的元素
说明：[元素属性名]{属性名：属性值；属性名：属性值} 选择有指定属性名的元素，而不管元素的该属性的属性值是什么
<style> [href]{ color:red; } </style> <body> <a href='taobao'>taobao</a> <div> <a href='baidu'>baidu</a> </div> <a href='tencent' >tencent</p> <!----taobao baiidu和tencent的字体颜色均为红色----> </body>
②具体属性值选择器：选择具有指定属性键值对（属性名和属性值都要匹配）的元素。
说明：[元素属性="属性值"]{属性名：属性值；属性名：属性值；} 属性名和属性值要完全匹配
<style> [href='taobao']{ color:red; } </style> <body> <a href='taobao'>taobao</a> <div> <a href='baidu'>baidu</a> </div> <a href='tencent' >tencent</p> <!----taobao的字体颜色均为红色----> </body>
③子串匹配属性选择器：可以规定属性值包含什么字符串(*)或以什么字符串开头(^)/结尾($)
说明：[元素属性^="def"]{属性名：属性值；属性名：属性值；} 相应的属性值以def开头的元素
[元素属性$="def"]{属性名：属性值；属性名：属性值；} 相应的属性值以def结尾的元素
[元素属性*="def"]{属性名：属性值；属性名：属性值；.} 相应的属性值包含def的元素
<style> .s1 p{ color:red; } </style> <body> <p>aa</p> <div class='s1'> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb、cc和dd的字体颜色为红色----> </body>
6、子选择器
说明：父元素>子元素{属性：属性值}，此表示为第一代子元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p>span{ color:red; } p span{ color:blue; } p>span>span{ color:green; } </style> </head> <body> <p> <span> C++工程师 <span> <span> web前端开发工程师 </span> </span> </span> </p> <p><span>嵌入式软件工程师<span>Java开发工程师</span></span></p> </body> </html>
注：特别注意这里p span代表span以及后面所有子元素，而p>span只代表p的第一span子元素，同理p>span>span代表p的孙子级元素。
7、伪元素选择器
说明：通过添加一些实际的元素来向匹配selector选择器的元素添加一些效果，有以下5种类型。
1、:first-line或::first-line伪元素，用于向文本的首行设置特殊样式
2、:first-letter或::first-letter伪元素，用于向文本的首字母设置样式
3、:before或::before在元素之前添加内容
4、:after或::after在元素之后添加内容
5、::selection设置元素在被选择时的样式
注：在CSS3之前，伪元素只有1~4四种（::selection为新增），且均为单冒号(：)，为了和伪类选择器进行区分，CSS3中规定，伪元素一律使用（::）双冒号，但但冒号依然可以使用，且兼容性更好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ font-size:25px; } .s1 p::first-line{ color:red; font-style: italic; } .s2 p::first-letter{ color:green; font-weight:bold; } .s3 p::before{ content:"我们生来就孤独"; color:rgb(0, 255, 76); } .s4 p::after{ content:"我是街上的游魂，谁是闻到我的人？"; color:blueviolet; } .s5 p::selection{ color:green; background:red; } </style> </head> <body> <div class="s1"> <h1>我把新买的iPhoneX放在钢琴上</h1> <p> 我同学看到后说：真能装！把手机放在这么显眼的位置。我笑了笑说：我弹着80万的钢琴 </p> </div> <div class="s2"> <h1>你却只看到一个1万块钱的手机</h1> <p> 我妈妈对我说：你住着5千万的别墅，却眼里只有钢琴 </p> </div> <div class="s3"> <h1>爸爸对我妈妈说</h1> <p>你享有身价500亿的老公</p> </div> <div class="s4"> <h1>却眼里只有个破别墅！</h1> <p>呵呵哒</p> </div> <div class="s5"> <h1>我笑着对你说：我给你看神评论</h1> <p>而你却纠结我是不是在骗赞！眼界决定境界，格局决定结局，谢谢！！</p> </div> </body> </html>
8、伪类选择器
关于伪类和伪元素的区别，推荐一篇博客文章，写的很好
9、群组选择器
说明：selector1,selector2,selector3{......}
<style> .s1,p{ color:red; } </style> <body> <p>aa</p> <span class='s1'>bb</span> <a>cc</a> <!----aa和bb的字体颜色为红色----> </body>