我们平时都会用到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>