我这里就简单举例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> CSS基础第二篇之选择器
原文地址：https://www.cnblogs.com/Mr-Jia-blog/p/8999546.html