CSS选择器详解（总结）

你的名字 2022-07-29 11:56 204阅读 0赞

#### 一、CSS选择器。 ####

![这里写图片描述][20160417120833834]

**a、基本选择器详解。**

> <table> 
>  <thead> 
>   <tr> 
>    <th>名称</th> 
>    <th align="left">语法构成</th> 
>    <th>描述</th> 
>    <th>返回值</th> 
>    <th align="left">示例</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>标签选择器</td> 
>    <td align="left">element</td> 
>    <td>根据给定的标签名匹配元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“h2”)选取所有的h2元素</td> 
>   </tr> 
>   <tr> 
>    <td>类选择器</td> 
>    <td align="left">.class</td> 
>    <td>根据给定的class匹配元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“.title”)选取所有class为title的元素</td> 
>   </tr> 
>   <tr> 
>    <td>ID选择器</td> 
>    <td align="left">id</td> 
>    <td>根据给定的id匹配元素</td> 
>    <td>单个元素</td> 
>    <td align="left">$(“#title”)选取id为title的元素</td> 
>   </tr> 
>   <tr> 
>    <td>并集选择器</td> 
>    <td align="left">selector1,<br>selector2,<br>….,<br>selectorN</td> 
>    <td>将每一个选择器匹配的元素<br>合并后一起返回</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“div,p,.title”)选取<br>所有div、p和拥有class为<br>title的元素。</td> 
>   </tr> 
>   <tr> 
>    <td>交集选择器</td> 
>    <td align="left"><code>element.class</code> <br>或 element#id</td> 
>    <td>匹配指定class 或 id 的某元素<br>或元素集合（若在同一页面中<br>指定id的元素返回值，则一定<br>是单个元素；若指定class 的元<br>素，则可以是单个元素，也可<br>以是元素集合）</td> 
>    <td>单个元素或<br>多个元素集合</td> 
>    <td align="left"><code>$("h2.title")</code>选取所有拥有<br>class为title的h2元素。</td> 
>   </tr> 
>   <tr> 
>    <td>全局选择器</td> 
>    <td align="left">*</td> 
>    <td>匹配所有元素</td> 
>    <td>集合元素</td> 
>    <td align="left">$(“*”)选取所有的元素</td> 
>   </tr> 
>  </tbody> 
> </table>

PS：**CSS选择器优先级的结论是：**

id选择器优先级 > 类class选择器优先级 > 标签选择器优先级

--------------------

**b、层次选择器的详细**

> <table> 
>  <thead> 
>   <tr> 
>    <th>名称</th> 
>    <th align="left">语法构成</th> 
>    <th>描述</th> 
>    <th>返回值</th> 
>    <th align="left">示例</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>后代选择器</td> 
>    <td align="left">ancestor<br> descendant</td> 
>    <td>选取ancestor元素里的所有<br>descendant（后代）元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“#menu span”)选取#menu 下<br>所有的<code>&lt;span&gt;</code>元素</td> 
>   </tr> 
>   <tr> 
>    <td>子选择器</td> 
>    <td align="left">parent&gt;child</td> 
>    <td>选取parent元素下的child(子)<br>元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“#menu&gt;span”)选取#menu下<br>的子元素<code>&lt;span&gt;</code></td> 
>   </tr> 
>   <tr> 
>    <td>相邻元素选择器</td> 
>    <td align="left">prev+next</td> 
>    <td>选取紧邻prev元素之后的<br>next元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“h2+dl”)选取紧邻<code>&lt;h2&gt;</code>元素 <br>之后的同辈元素<code>&lt;dl&gt;</code>元素。</td> 
>   </tr> 
>   <tr> 
>    <td>同辈元素选择器</td> 
>    <td align="left">prev~sibimgs</td> 
>    <td>选取prev元素之后的<br>所有siblings（同辈）元素</td> 
>    <td>元素集合</td> 
>    <td align="left">$(“h2~dl”)选取<code>&lt;h2&gt;</code>元素 <br>之后的所有同辈元素<code>&lt;dl&gt;</code>元素</td> 
>   </tr> 
>  </tbody> 
> </table>

--------------------

**c、属性选择器的详细**

> <table> 
>  <thead> 
>   <tr> 
>    <th>语法构成</th> 
>    <th align="left">描述</th> 
>    <th>返回值</th> 
>    <th>示例</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>[attribute]</td> 
>    <td align="left">选取包含给定属性<br>的元素</td> 
>    <td>元素集合</td> 
>    <td>$(“[href]”)选取含有href属性的元素。</td> 
>   </tr> 
>   <tr> 
>    <td>[attribute = value]</td> 
>    <td align="left">选取等于给定属性是<br>某个特定值的元素</td> 
>    <td>元素集合</td> 
>    <td>$(“[href = ‘#’]”)选取href属性值为<br>“#”的元素。</td> 
>   </tr> 
>   <tr> 
>    <td>[attribute != value]</td> 
>    <td align="left">选取不等于给定属性是<br>某个特定值的元素</td> 
>    <td>元素集合</td> 
>    <td>$(“[href != ‘#’]”)选取href属性值不<br>为“#”的元素。</td> 
>   </tr> 
>   <tr> 
>    <td>[attribute ^= value]</td> 
>    <td align="left">选取给定属性是<br>以某些特定值开始的元素</td> 
>    <td>元素集合</td> 
>    <td>$(“[href ^= ‘en’]”)选取href属性值以<br>“en”开头的元素。</td> 
>   </tr> 
>   <tr> 
>    <td><code>[attribute $= value]</code></td> 
>    <td align="left">选取给定属性是<br>以某些特定值结尾的元素</td> 
>    <td>元素集合</td> 
>    <td><code>$("[href $= '.jpg']")</code>选取href属性值<br>以“.jpg”结尾的元素。</td> 
>   </tr> 
>   <tr> 
>    <td><code>[attribute *= value]</code></td> 
>    <td align="left">选取给定属性是<br>包含某些值的元素</td> 
>    <td>元素集合</td> 
>    <td><code>$("[href *= 'txt']")</code>选取href属性值中<br>含有“txt”的元素。</td> 
>   </tr> 
>   <tr> 
>    <td>[selector]<br>[selector2]<br>[selectorN]</td> 
>    <td align="left">选取满足多个条件的<br>复合属性的元素</td> 
>    <td>元素集合</td> 
>    <td><code>$("li[id][title=新闻要点]")</code>选取含有<br>id属性和title属性为“新闻要点”的<br><code>&lt;li&gt;</code>元素。</td> 
>   </tr> 
>  </tbody> 
> </table>

--------------------

[20160417120833834]: /images/20220724/3bbaeeb9441a4d13931b37203e823033.png