CSS选择器是CSS的基石，赋予开发者精确控制HTML文档中元素样式的能力。选择器定义了CSS规则集将应用到HTML文档的哪一部分，通过不同类型的选择器，可以根据元素的tag、ID、class、属性、状态等各种条件来应用样式。本文将详细介绍各种CSS选择器并提供示例代码。
类型选择器（标签选择器）
类型选择器，也称为标签选择器，根据HTML元素的名称来选取元素。
1 2 3 4 | /* 所有的段落都会被应用样式 */p { color: blue;} |
id选择器
通过元素的ID属性选择特定的HTML元素。ID在HTML文档中是唯一的。
1 2 3 4 | /* 应用于ID为"header"的元素 */#header { background-color: navy;} |
类选择器
类选择器通过HTML元素的class属性选取元素，一个class可以被多个元素共享。
1 2 3 4 | /* 所有带有"class-name"类的元素 */.class-name { font-weight: bold;} |
后代选择器
后代选择器（也称为上下文选择器）用于选取某个元素的后代元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 | /* 选择<div>内的所有<span> */div span { color: red;}</span></div><h3>子选择器</h3><p>子选择器仅选择直接子元素。</p><div class="jb51code"><pre class="brush:css;">/* 只选择<div>元素的直接子元素<ul> */div > ul { list-style-type: none;}</ul></div><h3>相邻同辈选择器</h3><p>相邻同辈选择器选取紧随其后的相邻同辈元素。</p><div class="jb51code"><pre class="brush:css;">/* 选择<p>元素之后的第一个</p><h2>元素 */p + h2 { margin-top: 0;}</h2></pre></div><h3>一般同辈选择器</h3><p>一般同辈选择器用于选取某元素之后的所有具有相同父元素的同辈元素。</p><div class="jb51code"><pre class="brush:css;">/* 选择<h2>元素之后所有兄弟元素</h2><h2> */h2 ~ h2 { border-top: 1px solid gray;}</h2></pre></div><h3>通用选择器</h3><p>通用选择器是一个通配符，匹配文档中的所有元素。</p><div class="jb51code"><pre class="brush:css;">/* 页面中所有元素都将有黄色背景 */* { background: yellow;}</pre></div><h3>属性选择器</h3><p>属性选择器根据元素的属性及其值来选择元素。</p><div class="jb51code"><pre class="brush:css;">/* 选择含有"target"属性的HTML元素 */[target] { border: 1px solid black;}/* 选择"target"属性等于"_blank"的HTML元素 */[target="_blank"] { background-color: silver;}</pre></div><p><strong>属性选择器与特殊字符</strong></p><p>CSS还提供了特定的字符，供属性选择器使用，用于更加细致的条件匹配。</p><div class="jb51code"><pre class="brush:css;">/* 选择具有以"btn-"开头的class属性值的元素 */[class^="btn-"] { padding: 5px 10px;}/* 选择具有以"-btn"结尾的class属性值的元素 */[class$="-btn"] { font-weight: bold;}/* 选择class属性值含有"btn-"的任何地方的元素 */[class*="btn-"] { font-size: 1.2em;}</pre></div><h3>伪元素选择器</h3><p>伪元素选择器用于样式化元素的特定部分或生成的内容。</p><p><code>::first-letter</code> 和 <code>::first-line</code></p><div class="jb51code"><pre class="brush:css;">p::first-letter { font-size: 200%; color: #8A2BE2;}p::first-line { font-variant: small-caps;}</pre></div><p><code>::before</code> 和 <code>::after</code></p><div class="jb51code"><pre class="brush:css;">h1::before { content: "Welcome "; color: green;}h1::after { content: "!"; color: red;}</pre></div><h3>伪类选择器</h3><p>伪类选择器用于定义元素的特殊状态。</p><p><code>:link</code>、<code>:visited</code>、<code>:hover</code>、<code>:focus</code>、<code>:active</code></p><div class="jb51code"><pre class="brush:css;">a:link { color: #FF0000;}a:visited { color: #00FF00;}a:hover { color: #FF00FF;}a:focus { border: 1px dashed #0000FF;}a:active { color: #0000FF;}</pre></div><p><code>:target</code> 和 <code>:not()</code></p><div class="jb51code"><pre class="brush:css;">:target { background-color: #f9f9f9;}:not(.highlighted) { background-color: #ffff00;}</pre></div><h3>结构化伪类选择器</h3><p>结构化伪类选择器允许基于文档结构选择元素。</p><p><code>:nth-child</code> 和 <code>:nth-last-child</code></p><div class="jb51code"><pre class="brush:css;">li:nth-child(odd) { color: red;}li:nth-child(even) { color: blue;}/* 从末尾开始的第二个子元素 */li:nth-last-child(2) { font-size: 1.5em;}</pre></div><p><code>:nth-of-type</code> 和 <code>:nth-last-of-type</code></p><div class="jb51code"><pre class="brush:css;">/* 选择第一个<p>类型的元素 */p:nth-of-type(1) { font-weight: bold;}/* 选择倒数第二个</p><p>类型的元素 */p:nth-last-of-type(2) { background-color: lightgray;}</p></pre></div><h3>伪类表单选择器</h3><p>CSS为表单提供了一组伪类选择器，用于根据不同的状态来设置样式。</p><p><code>:required</code>、<code>:valid</code>、<code>:invalid</code>、<code>:optional</code>、<code>:in-range</code> 和 <code>:out-of-range</code></p><div class="jb51code"><pre class="brush:css;">input:required { border: 1px solid red;}input:valid { border: 1px solid green;}input:invalid { background-color: #ffdddd;}input:optional { opacity: 0.75;}input:in-range { border-color: blue;}input:out-of-range { border-color: orange;}</pre></div><p><code>:read-only</code> 和 <code>:read-write</code></p><div class="jb51code"><pre class="brush:css;">input:read-only { background-color: #eeeeee;}input:read-write { background-color: #fff;}</pre></div><p>通过精确选择元素，CSS选择器几乎可以无限制地控制页面样式。了解并掌握它们，将使设计者能够有效地操作DOM结构，带来更丰富的表现力和互动性。随着CSS规范的不断发展，选择器的种类和功能也在不断扩展，进一步增强了开发者描述和实现复杂设计的能力。</p><p>以上就是CSS中常见选择器的介绍与使用的详细内容，更多关于CSS选择器的资料请关注IT俱乐部其它相关文章！</p><div class="clearfix"> <span id="art_bot" class="jbTestPos"></span> </div><p></p></pre></div><div class="tags clearfix"> <i class="icon-tag"></i><p></p><ul class="meta-tags"><li class="tag">Tag：<a href="https://www.jb51.net/do/tag/css/" target="_blank" rel="noopener">css</a> <a href="https://www.jb51.net/do/tag/%E9%80%89%E6%8B%A9%E5%99%A8/" target="_blank" rel="noopener">选择器</a> <a href="https://www.jb51.net/do/tag//" target="_blank" rel="noopener"></a> </li></ul></div><div class="lbd clearfix"> <span id="art_down" class="jbTestPos"></span> </div><div id="shoucang"></div><div class="xgcomm clearfix"><h2>相关文章</h2><ul><li class="lbd clearfix"><span id="art_xg" class="jbTestPos"></span></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/764992.html" title="CSS复合选择器的具体使用方法" rel="noopener">CSS复合选择器的具体使用方法</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了CSS复合选择器的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学</div><p><span class="lbtn fr"> 2021-02-23 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/764600.html" title="一文教你玩转CSS 组合选择器" rel="noopener">一文教你玩转CSS 组合选择器</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了一文教你玩转CSS 组合选择器,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下</div><p><span class="lbtn fr"> 2021-02-20 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-21b99844231496a35120e8ff8d2e7479.jpg"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/742588.html" title="CSS 中的六个重要选择器(三秒就可以记住)" rel="noopener">CSS 中的六个重要选择器(三秒就可以记住)</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了CSS 中的六个重要选择器(三秒就可以记住),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下</div><p><span class="lbtn fr"> 2020-08-27 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-b3946421b08ed81a74535466956312ee.png"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/715990.html" title="CSS选择器中的正则表达式使用" rel="noopener">CSS选择器中的正则表达式使用</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了CSS选择器中的正则表达式使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学</div><p><span class="lbtn fr"> 2020-03-11 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-8ffe02d35e8dda3038cfaa3686acaee2.png"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/715987.html" title="巧用CSS属性值正则匹配选择器(小技巧)" rel="noopener">巧用CSS属性值正则匹配选择器(小技巧)</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了巧用CSS属性值正则匹配选择器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习</div><p><span class="lbtn fr"> 2020-03-11 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-facc9d9f762bbc922819e993b22f79b2.jpg"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/652038.html" title="盘点CSS Selectors Level4中新增的选择器" rel="noopener">盘点CSS Selectors Level4中新增的选择器</a></p><div class="item-info"><div class="js"> CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。需</div><p><span class="lbtn fr"> 2018-12-24 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/647143.html" title="css选择器设置标签样式的实例代码" rel="noopener">css选择器设置标签样式的实例代码</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了css选择器设置标签样式的实例代码,需要的朋友可以参考下</div><p><span class="lbtn fr"> 2018-11-22 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/644075.html" title="使用CSS属性选择器来拼接HTML的DNA的方法" rel="noopener">使用CSS属性选择器来拼接HTML的DNA的方法</a></p><div class="item-info"><div class="js"> CSS属性选择器非常神奇，它们可以帮你避免添加数不胜数的类名，从另一方面来指出你代码里的一些问题。接下来通过本文给大家介绍使用CSS属性选择器来拼接HTML的DNA的方法，</div><p><span class="lbtn fr"> 2018-11-02 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/641172.html" title="深入理解CSS 选择器 " rel="noopener">深入理解CSS 选择器 </a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了CSS 选择器的相关知识，本文通过实例代码给大家介绍的非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下</div><p><span class="lbtn fr"> 2018-10-16 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/css/598674.html" title="CSS选择器的新用法(推荐)" rel="noopener">CSS选择器的新用法(推荐)</a></p><div class="item-info"><div class="js"> 本文将详细介绍CSS选择器的新用法，感兴趣的朋友一起学习吧</div><p><span class="lbtn fr"> 2018-02-02 </span></p></div></div></div></div></li></ul></div><div class="lbd clearfix mt5"> <span id="art_down2" class="jbTestPos"></span> </div><p> <a href=""></a></p><div id="comments"><h2>最新评论</h2><div class="pd5"><div id="SOHUCS"></div></div></div><p></p> |
