超级详细，玩转css选择器，这一篇就够了

电玩女神 2022-12-11 15:30 140阅读 0赞

导语：  
css其实也能玩出花样来，只要学的够深入，够深刻，轻轻松松写出令人惊艳的样式出来，本文来写一写css选择器。

所有的css选择器整理：

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">例子</th> 
   <th align="center">例子描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">.class</td> 
   <td align="center">.xiaomizhou</td> 
   <td align="center">选择 class=“xiaomizhou” 的所有元素</td> 
  </tr> 
  <tr> 
   <td align="center">#id</td> 
   <td align="center">#firstname</td> 
   <td align="center">选择 id=“firstname” 的所有元素</td> 
  </tr> 
  <tr> 
   <td align="center">*</td> 
   <td align="center">*</td> 
   <td align="center">选择所有元素</td> 
  </tr> 
  <tr> 
   <td align="center">element</td> 
   <td align="center">p</td> 
   <td align="center">选择所有 &lt; p &gt; 元素</td> 
  </tr> 
  <tr> 
   <td align="center">element,element</td> 
   <td align="center">div,p</td> 
   <td align="center">选择所有 &lt; div &gt; 元素和所有 &lt; p &gt; 元素</td> 
  </tr> 
  <tr> 
   <td align="center">element element</td> 
   <td align="center">div p</td> 
   <td align="center">选择 &lt; div &gt; 元素内部的所有 &lt; p &gt; 元素</td> 
  </tr> 
  <tr> 
   <td align="center">element&gt;element</td> 
   <td align="center">div&gt;p</td> 
   <td align="center">选择父元素为 &lt; div &gt; 元素的所有 &lt; p &gt; 元素</td> 
  </tr> 
  <tr> 
   <td align="center">element+element</td> 
   <td align="center">div+p</td> 
   <td align="center">选择紧接在 &lt; div &gt; 元素之后的所有 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute]</td> 
   <td align="center">[target]</td> 
   <td align="center">选择带有 target 属性所有元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute=value]</td> 
   <td align="center">[target=_blank]</td> 
   <td align="center">选择 target="_blank" 的所有元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute~=value]</td> 
   <td align="center">[title~=flower]</td> 
   <td align="center">选择 title 属性包含单词 “flower” 的所有元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute]</td> 
   <td align="center">=value]</td> 
   <td align="center">[lang</td> 
  </tr> 
  <tr> 
   <td align="center">:link</td> 
   <td align="center">a:link</td> 
   <td align="center">选择所有未被访问的链接。</td> 
  </tr> 
  <tr> 
   <td align="center">:visited</td> 
   <td align="center">a:visited</td> 
   <td align="center">选择所有已被访问的链接。</td> 
  </tr> 
  <tr> 
   <td align="center">:active</td> 
   <td align="center">a:active</td> 
   <td align="center">选择活动链接。</td> 
  </tr> 
  <tr> 
   <td align="center">:hover</td> 
   <td align="center">a:hover</td> 
   <td align="center">选择鼠标指针位于其上的链接。</td> 
  </tr> 
  <tr> 
   <td align="center">:focus</td> 
   <td align="center">input:focus</td> 
   <td align="center">选择获得焦点的 input 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:first-letter</td> 
   <td align="center">p:first-letter</td> 
   <td align="center">选择每个 &lt; p &gt; 元素的首字母。</td> 
  </tr> 
  <tr> 
   <td align="center">:first-line</td> 
   <td align="center">p:first-line</td> 
   <td align="center">选择每个 &lt; p &gt; 元素的首行。</td> 
  </tr> 
  <tr> 
   <td align="center">:first-child</td> 
   <td align="center">p:first-child</td> 
   <td align="center">选择属于父元素的第一个子元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:before</td> 
   <td align="center">p:before</td> 
   <td align="center">在每个 &lt; p &gt; 元素的内容之前插入内容。</td> 
  </tr> 
  <tr> 
   <td align="center">:after</td> 
   <td align="center">p:after</td> 
   <td align="center">在每个 &lt; p &gt; 元素的内容之后插入内容。</td> 
  </tr> 
  <tr> 
   <td align="center">:lang(language)</td> 
   <td align="center">p:lang(it)</td> 
   <td align="center">选择带有以 “it” 开头的 lang 属性值的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">element1~element2</td> 
   <td align="center">p~ul</td> 
   <td align="center">选择前面有 &lt; p &gt; 元素的每个 &lt; ul &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute^=value]</td> 
   <td align="center">a[src^=“https”]</td> 
   <td align="center">选择其 src 属性值以 “https” 开头的每个 &lt; a &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute$=value]</td> 
   <td align="center">a[src$=".pdf"]</td> 
   <td align="center">选择其 src 属性以 “.pdf” 结尾的所有 &lt; a &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">[attribute*=value]</td> 
   <td align="center">a[src*=“abc”]</td> 
   <td align="center">选择其 src 属性中包含 “abc” 子串的每个 &lt; a &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:first-of-type</td> 
   <td align="center">p:first-of-type</td> 
   <td align="center">选择属于其父元素的首个 &lt; p &gt; 元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:last-of-type</td> 
   <td align="center">p:last-of-type</td> 
   <td align="center">选择属于其父元素的最后 &lt; p &gt; 元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:only-of-type</td> 
   <td align="center">p:only-of-type</td> 
   <td align="center">选择属于其父元素唯一的 &lt; p &gt; 元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:only-child</td> 
   <td align="center">p:only-child</td> 
   <td align="center">选择属于其父元素的唯一子元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:nth-child(n)</td> 
   <td align="center">p:nth-child(2)</td> 
   <td align="center">选择属于其父元素的第二个子元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:nth-last-child(n)</td> 
   <td align="center">p:nth-last-child(2)</td> 
   <td align="center">同上，从最后一个子元素开始计数。</td> 
  </tr> 
  <tr> 
   <td align="center">:nth-of-type(n)</td> 
   <td align="center">p:nth-of-type(2)</td> 
   <td align="center">选择属于其父元素第二个 &lt; p &gt; 元素的每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:nth-last-of-type(n)</td> 
   <td align="center">p:nth-last-of-type(2)</td> 
   <td align="center">同上，但是从最后一个子元素开始计数。</td> 
  </tr> 
  <tr> 
   <td align="center">:last-child</td> 
   <td align="center">p:last-child</td> 
   <td align="center">选择属于其父元素最后一个子元素每个 &lt; p &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:root</td> 
   <td align="center">:root</td> 
   <td align="center">选择文档的根元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:empty</td> 
   <td align="center">p:empty</td> 
   <td align="center">选择没有子元素的每个 &lt; p &gt; 元素（包括文本节点）。</td> 
  </tr> 
  <tr> 
   <td align="center">:target</td> 
   <td align="center">#news:target</td> 
   <td align="center">选择当前活动的 #news 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:enabled</td> 
   <td align="center">input:enabled</td> 
   <td align="center">选择每个启用的 &lt; input &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:disabled</td> 
   <td align="center">input:disabled</td> 
   <td align="center">选择每个禁用的 &lt; input &gt; 元素</td> 
  </tr> 
  <tr> 
   <td align="center">:checked</td> 
   <td align="center">input:checked</td> 
   <td align="center">选择每个被选中的 &lt; input &gt; 元素。</td> 
  </tr> 
  <tr> 
   <td align="center">:not(selector)</td> 
   <td align="center">:not§</td> 
   <td align="center">选择非 &lt; p &gt; 元素的每个元素。</td> 
  </tr> 
  <tr> 
   <td align="center">::selection</td> 
   <td align="center">::selection</td> 
   <td align="center">选择被用户选取的元素部分。</td> 
  </tr> 
 </tbody> 
</table>

## 1，class ##

<!DOCTYPE html>
    <html>
    <head>
    <style> .intro{ background-color:yellow; } </style>
    </head>
    <body>
    	<div class="intro">
    		<p>我是小米粥。</p>
    	</div>
    </body>
    </html>

![在这里插入图片描述][20201004132916854.png_pic_center]

### 2，element+element ###

<!DOCTYPE html>
    <html>
    <head>
    <style> div+p{ background-color:yellow; } </style>
    </head>
    <body>
    	<div class="intro">
    		<p>我是小米粥。</p>
    	</div>
        <p>我是小米粥。2</p>
    </body>
    </html>

![在这里插入图片描述][20201004151926144.png_pic_center]

### 3，\[attribute\] ###

//[target] 有target属性
    //[target=_blank] target属性为_blank
    //[title~=flower] title属性包含flower
    //[lang|=en] lang属性以en开头
    
    
    //下面演示第二种target属性为_blank
    <!DOCTYPE html>
    <html>
    <head>
    <style> a[target=_blank]{ background-color:yellow; } </style>
    </head>
    <body>
    	<p>带有 target 属性的链接会得到黄色背景：</p>
    	  <a href="http://www.w3school.com.cn">w3school.com.cn</a>
    	  <a href="http://www.disney.com" target="_blank">disney.com</a>
    	  <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]

### 4，a:link，:visited，:active，:hover，:focus ###

<head>
    <style> a:link{ background-color:white; } a:visited{ background-color:yellow; } a:active{ background-color:yellow; } a:hover{ background-color:yellow; } input:focus{ background-color:yellow; } </style>
    </head>
    <body>
    	<a href="http://www.w3school.com.cn">W3Sschool</a>
    	<a href="http://www.google.com">Google</a>
    	<a href="http://www.wikipedia.org">Wikipedia</a><br>
    	First name: <input type="text" name="firstname" /><br>
    	<p><b>注释：<br></b>:link 选择器为未被访问过的链接设置样式。</p><br>
    	</b>:visited 选择器为已被访问过的链接设置样式。</p><br>
    	</b>:active 选择器为点击时候链接设置样式。</p><br>
    	</b>:hover 选择器为鼠标悬浮的时候链接设置样式。</p><br>
    	</b>input:focus 选择器为input聚焦时候的设置样式。</p><br>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

### 5，first-letter，first-line ###

<!DOCTYPE html>
    <html>
    <head>
    <style> p:first-letter{ font-size:200%; color:#8A2BE2; } p:first-line{ background-color:yellow; } </style>
    </head>
    <body>
      <div>
        <p>My name is Donald.My name is Donald.My name is Donald.My name is Donald.My name is Donald.My name is Donald.My name is Donald.My name is Donald.</p>
        <p>I live in Duckburg.</p>
      </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]

### 6，before，after ###

<!DOCTYPE html>
    <html>
    <head>
    <style> p:before{ content:"台词："; } p:after{ content:"哈哈哈哈"; } </style>
    </head>
    <body>
      <p>我是小米粥。</p>
      <p>我住在中国。</p>
      <b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
    </body>
    </html>

![在这里插入图片描述][20201004154332513.png_pic_center]

### 7，input\[type=“text”\]:enabled，:disabled ###

<!DOCTYPE html>
    <html>
    <head>
    <style> input[type="text"]:enabled { background:#ffff00; } input[type="text"]:disabled { background:#dddddd; } </style>
    </head>
    <body>
    
    <form action="">
    First name: <input type="text" value="Mickey" /><br>
    Last name: <input type="text" value="Mouse" /><br>
    Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
    </form>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]  
**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20201004132916854.png_pic_center]: /images/20221123/20483cf7b99d47e08bebac860845c470.png
[20201004151926144.png_pic_center]: /images/20221123/b6538b6c1c7540558eade9a8be78c6a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9a64616e1f2d4b6b9ecc815657f06cfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/c8f02ae4f5b54a5cbe9c0669d1544757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/beab6bd36c194549b30ece89d7da8979.png
[20201004154332513.png_pic_center]: /images/20221123/57d57f99e9df4babaaeff4096ce85557.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/1ba2fc21b91446f5be2bbbe5b4dff7a0.png
[20200902155530706.jpg_pic_center]: /images/20221123/fc163a17243442fea99098e51d9c75c2.png
[20200825125805528.png_pic_center]: /images/20221123/f52870ccaf2444c39fbfa96d77168c42.png
[node]: /images/20221123/2dfa2a75da664162a7896c2fe7ead592.png