CSS选择器有哪些？选择器的优先级如何排序？

深藏阁楼爱情的钟 2023-02-12 08:26 6阅读 0赞

本文章转载于：[https://www.cnblogs.com/AIonTheRoad/p/11283100.html][https_www.cnblogs.com_AIonTheRoad_p_11283100.html]

CSS选择器分类：

CSS的选择器分类可以分为三大类：id选择器，类选择器，标签选择器。

用法如下：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th></th> 
   <th>e.g.</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id选择器</td> 
   <td>#id</td> 
   <td>#header</td> 
   <td>选择id="header"的所有元素</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>.class</td> 
   <td>.message</td> 
   <td>选择class="message"的所有元素</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td>el</td> 
   <td>div</td> 
   <td>选择所有的div元素</td> 
  </tr> 
 </tbody> 
</table>

其中他们又可以以不同的方式进行组合，如下：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th></th> 
   <th>e.g.</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后代选择器</td> 
   <td>el el</td> 
   <td>div p</td> 
   <td>选择div元素内部的所有p元素</td> 
  </tr> 
  <tr> 
   <td>子代选择器</td> 
   <td>el&gt;el</td> 
   <td>div&gt;p</td> 
   <td>选择div元素的第一子代的所有p元素</td> 
  </tr> 
  <tr> 
   <td>相邻兄弟选择器</td> 
   <td>el+el</td> 
   <td>.msg+p</td> 
   <td>选择与class为"msg"的元素同级且紧跟其后的第一个p元素</td> 
  </tr> 
  <tr> 
   <td>通用兄弟选择器</td> 
   <td>el~el</td> 
   <td>.msg~p</td> 
   <td>选择class为"msg"的元素后面的所有p元素</td> 
  </tr> 
  <tr> 
   <td>群组选择器</td> 
   <td>el,el</td> 
   <td>p, span, .blue,#box</td> 
   <td>选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素</td> 
  </tr> 
  <tr> 
   <td>伪类选择器</td> 
   <td>:link,:visited, :hover, :active, :focus</td> 
   <td>a:hover</td> 
   <td>选择鼠标指针位于a标签之上的链接</td> 
  </tr> 
  <tr> 
   <td>伪元素选择器</td> 
   <td>:before, :after</td> 
   <td>p:before</td> 
   <td>在每个p元素内容之前插入内容</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td>[attribute]</td> 
   <td>[target]</td> 
   <td>选择带有target属性的所有元素</td> 
  </tr> 
  <tr> 
   <td>通用选择器</td> 
   <td>*</td> 
   <td>*</td> 
   <td>选择所有的元素</td> 
  </tr> 
 </tbody> 
</table>

优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

权 重： !important：10000

内联： 1000

id选择器：100

类、伪类、属性选择器：10

标签、伪元素选择器：1

通用选择器（\*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0

[https_www.cnblogs.com_AIonTheRoad_p_11283100.html]: https://www.cnblogs.com/AIonTheRoad/p/11283100.html