CSS的2个冷门却又实用的选择器

小灰灰 2022-07-16 06:54 183阅读 0赞

一般来说我们写CSS选择器时，倾向于直接用空格隔开，比如 div p 。

但是这种选择器选择范围太广，当我们想定位到个别元素，又不想使用独立的类时，就不方便了。

因此，最近的学习中遇到几个不常用，但是很好用的选择器：

第1个" >"：

<table style="border-style:solid; border-color:rgb(170,170,170); margin:10px 0px 0px; padding:0px; border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_element_gt.asp" title="CSS element>element 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow"><span style="margin:0px; padding:0px; border:0px">element</span>&gt;<span style="margin:0px; padding:0px; border:0px">element</span></a></td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> div&gt;p</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 选择父元素为 &lt;div&gt; 元素的所有 &lt;p&gt; 元素。</td> 
  </tr> 
 </tbody> 
</table>

所有主流浏览器都支持 element>element 选择器。

**注释：**对于 IE8 及更早版本的浏览器中的 element>element，必须声明 [<!DOCTYPE>][DOCTYPE]。

其实这个选择器，还可以这么描述：

div > p: 选中div下的所有第一级p元素。举个栗子，采用如下的方式，span标签中的内容就无法被选中了。

<div>
        <span>
            <p>我是唐老鸭。</p>
        </span>
        <p>我住在 Duckburg。</p>
    </div>

第2个" +"：

<table style="border-style:solid; border-color:rgb(170,170,170); margin:10px 0px 0px; padding:0px; border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_element_plus.asp" title="CSS element+element 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow"><span style="margin:0px; padding:0px; border:0px">element</span>+<span style="margin:0px; padding:0px; border:0px">element</span></a></td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> div+p</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 选择紧接在 &lt;div&gt; 元素之后的所有 &lt;p&gt; 元素。</td> 
  </tr> 
 </tbody> 
</table>

所有主流浏览器都支持 element\+element 选择器。

**注释：**对于 IE8 及更早版本的浏览器中的 element\+element，必须声明 [<!DOCTYPE>][DOCTYPE]。

这个选择器其实选中的是div之后紧邻的第一个p元素。

<div>
        <p>我是唐老鸭。</p>
        <p>我住在 Duckburg。</p>
    </div>
    
    <p>我最好的朋友是米老鼠。</p>
    
    <p>我的样式不会改变。</p>

![20161011001703941][]

第3个" nth-child"：

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> <a href="http://www.w3school.com.cn/cssref/selector_nth-child.asp" title="CSS :nth-child(n) 选择器" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent" rel="nofollow">:nth-child(<span style="margin:0px; padding:0px; border:0px">n</span>)</a></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> p:nth-child(2)</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 3</td> 
  </tr> 
 </tbody> 
</table>

所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。

nth-child( n ) , 这个选择器不支持IE8，但是在一些大型的网站上都有使用，用起来感觉还是挺方便的。

参考文档：

http://www.w3school.com.cn/cssref/css\_selectors.asp

[DOCTYPE]: http://www.w3school.com.cn/tags/tag_doctype.asp
[20161011001703941]: /images/20220716/7740e22d13f64ef9ae0ee11d8ff09ae2.png