我们平时都会用到css选择器，下面我就利用例子来演示下各个选择器的使用
?1 <!DOCTYPE html> ?2 <html> ?3 ??4 ????<head> ?5 ????????<meta charset="UTF-8"> ?6 ????????<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> ?7 ??8 ????????<title></title> ?9 ????????<style> 10 ????????????div { 11 ????????????????width: 10em; 12 ????????????????height: 10em; 13 ????????????} 14 ?????????????15 ????????????#myBody { 16 ????????????????/*background-color: gray;*/ 17 ????????????} 18 ????????????/*限定式选择器*/ 19 ????????????/*id为myDiv的div标签*/ 20 ?????????????21 ????????????div#myDiv { 22 ????????????????/*background-color: navajowhite;*/ 23 ????????????} 24 ????????????/*div.class*/ 25 ????????????/*后台选择器*/ 26 ????????????/*div内id为myDiv的元素*/ 27 ????????????/*div #myDiv { 28 ????????????????background-color: navajowhite; 29 ????????????????width: 10em; 30 ????????????????height: 10em; 31 ????????????}*/ 32 ????????????/*div .class*/ 33 ????????????/*并集选择器，用逗号分隔*/ 34 ????????????/*h1,span,.class{ 35 ?????????????????36 ????????????}*/ 37 ????????????/*通配符选择器,*号代表选择所有*/ 38 ????????????/**{ 39 ????????????????background-color: red !important; 40 ?????????????????41 ????????????}*/ 42 ????????????/*其他选择器*/ 43 ????????????/*直接子元素*/ 44 ?????????????45 ????????????#myBody>#myDiv { 46 ????????????????/*background-color: yellow !important;*/ 47 ????????????} 48 ????????????/*同级的下一个元素*/ 49 ?????????????50 ????????????#myDiv+#myDiv2 { 51 ????????????????/*background-color: orchid;*/ 52 ????????????} 53 ????????????/*同级之后所有的div标签*/ 54 ?????????????55 ????????????#myDiv~div { 56 ????????????????/*background-color: cadetblue;*/ 57 ????????????} 58 ????????????/*属性选择*/ 59 ?????????????60 ????????????input[name] { 61 ????????????????/*background-color: indianred;*/ 62 ????????????} 63 ????????????/*属性匹配*/ 64 ?????????????65 ????????????input[name=‘username‘] { 66 ????????????????/*background-color: indianred;*/ 67 ????????????} 68 ????????????/*属性首字符*/ 69 ?????????????70 ????????????input[name^=‘user‘] { 71 ????????????????/*background-color: indianred;*/ 72 ????????????} 73 ????????????/*属性结束字符*/ 74 ?????????????75 ????????????input[name$=‘name‘] { 76 ????????????????/*background-color: indianred;*/ 77 ????????????} 78 ????????????/*属性包含字符（通配符）*/ 79 ?????????????80 ????????????input[name*=‘rn‘] { 81 ????????????????/*background-color: indianred;*/ 82 ????????????} 83 ????????????/*选择所有未被访问过得链接*/ 84 ?????????????85 ????????????a:link { 86 ????????????????/*color: red;*/ 87 ????????????} 88 ????????????/*选择所有已被访问过得链接*/ 89 ?????????????90 ????????????a:visited { 91 ????????????????/*color: red;*/ 92 ????????????} 93 ????????????/*鼠标按下时的效果*/ 94 ?????????????95 ????????????a:active { 96 ????????????????/*color: yellow;*/ 97 ????????????} 98 ????????????/*鼠标经过时的效果*/ 99 ????????????100 ????????????a:hover {101 ????????????????/*color: yellow;*/102 ????????????}103 ????????????/*获得焦点*/104 ????????????105 ????????????input:focus {106 ????????????????/*background-color: yellow;*/107 ????????????}108 ????????????/*段落中的首个字符*/109 ????????????110 ????????????p:first-letter {111 ????????????????/*background-color: yellow;*/112 ????????????}113 ????????????/*段落中的首行*/114 ????????????115 ????????????p:first-line {116 ????????????????/*background-color: yellow;*/117 ????????????}118 ????????????/*div下的第一个子元素*/119 ????????????120 ????????????div:first-child {121 ????????????????/*background-color: yellow !important;*/122 ????????????}123 ????????????/*div下的最后一个子元素*/124 ????????????div:last-child {125 ????????????????/*color: red;*/126 ????????????}127 ????????????/*所有p元素前插入字符*/128 ????????????p:before{129 ????????????????content: ‘before插入‘;130 ????????????}131 ????????????/*所有p元素后插入字符*/132 ????????????p:after{133 ????????????????content: ‘after插入‘;134 ????????????}135 ????????????/*选择div下第一个p元素*/136 ????????????div p:first-of-type{137 ????????????????/*background-color: yellow;*/138 ????????????}139 ????????????/*选择div下最后一个p元素*/140 ????????????div p:last-of-type{141 ????????????????/*background-color: yellow;*/142 ????????????}143 ????????????/*选择div的第二个子元素*/144 ????????????div:nth-child(2){145 ????????????????/*background-color: yellow;*/146 ????????????}147 ????????????/*div倒二个子元素，暂时没起到效果*/148 ????????????div:nth-last-child(2){149 ????????????????/*background-color: yellow;*/150 ????????????}151 ????????????/*没有子元素的div标签，暂时无效*/152 ????????????div:empty{153 ????????????????background-color: yellow;154 ????????????}155 ????????????/*not 不包含第一个div子元素*/156 ????????????div:not(:first-child){157 ????????????????background-color: yellow;158 ????????????}159 ????????</style>160 ????</head>161 162 ????<body>163 ????????<div id="myBody">164 ????????????<div id="myDiv">165 166 ????????????</div>167 ????????????<div id="myDiv2">168 169 ????????????</div>170 ????????????<div id="myDiv3">171 172 ????????????</div>173 ????????????<div id="myDiv4">174 175 ????????????</div>176 177 ????????????<input name="username" value="用户名" />178 179 ????????????<a id="myLink" href="javascript:void(0)">百度</a>180 ????????????<a id="myLink2" href="https://www.baidu.com">百度</a>181 ????????????<a id="myLink3" href="https://www.baidu.com">百度</a>182 ????????????<p>183 ????????????????用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。184 185 ????????????</p>186 ????????????<p>187 ????????????????我是第二个段落188 ????????????????<p>我是第二个段落的儿子</p>189 ????????????</p>190 ????????</div>191 192 ????</body>193 194 </html>css3 选择器详解
原文地址：https://www.cnblogs.com/siqijuly/p/9031230.html