CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

缺乏、安全感 2021-10-30 01:01 403阅读 0赞

### CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） ###

*  CSS选择器的使用
 *   *  1. CSS基础选择器的使用
     *  2.CSS复合选择器的使用
     *  3.伪类选择器
     *   *  3.1 链接伪类选择器
         *  3.2 结构（位置）伪类选择器
         *  3.3目标伪类选择器
     *  4. 属性选择器
     *   *  4.1简单属性选择
         *  4.2 根据具体属性值选择
         *  4.3 根据部分属性值选择
         *  4.4 特定属性选择类型
     *  5. 伪元素选择器

# CSS选择器的使用 #

选择器可以帮助我们找到特定的HTML页面元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]

## 1. CSS基础选择器的使用 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>作用</th> 
   <th>缺点</th> 
   <th>使用情况</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签选择器</td> 
   <td>可以选出所有相同的标签，比如p</td> 
   <td>不能差异化选择</td> 
   <td>较多</td> 
   <td>p { color：blue;}</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>可以选出1个或者多个标签</td> 
   <td>可以根据需求选择</td> 
   <td>非常多</td> 
   <td>.nav { color: yellow; }</td> 
  </tr> 
  <tr> 
   <td>id选择器</td> 
   <td>一次只能选择器1个标签</td> 
   <td>只能使用一次</td> 
   <td>使用较少</td> 
   <td>#nav {color: red;}</td> 
  </tr> 
  <tr> 
   <td>通配符选择器</td> 
   <td>选择所有的标签</td> 
   <td>选择的太多，有部分不需要</td> 
   <td>不推荐使用</td> 
   <td>* {color: black;}</td> 
  </tr> 
 </tbody> 
</table>

## 2.CSS复合选择器的使用 ##

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。**下面表格是常用的复合选择器：**

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>作用</th> 
   <th>特征</th> 
   <th>使用情况</th> 
   <th>隔开符号及用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后代选择器</td> 
   <td>用来选择元素后代</td> 
   <td>是选择所有的子孙后代</td> 
   <td>较多</td> 
   <td>符号是<strong>空格</strong> .nav a</td> 
  </tr> 
  <tr> 
   <td>子代选择器</td> 
   <td>选择 最近一级元素</td> 
   <td>只选亲儿子</td> 
   <td>较少</td> 
   <td>符号是**&gt;** .nav&gt;p</td> 
  </tr> 
  <tr> 
   <td>相邻兄弟选择器</td> 
   <td>给同一父元素下的兄弟元素更改状态</td> 
   <td>必须是同一父元素下</td> 
   <td>较少</td> 
   <td>h1 + p {margin-top:50px;}</td> 
  </tr> 
  <tr> 
   <td>交集选择器</td> 
   <td>选择两个标签交集的部分</td> 
   <td>既是 又是</td> 
   <td>较少</td> 
   <td><strong>没有符号</strong> p.one</td> 
  </tr> 
  <tr> 
   <td>并集选择器</td> 
   <td>选择某些相同样式的选择器</td> 
   <td>可以用于集体声明</td> 
   <td>较多</td> 
   <td>符号是<strong>逗号</strong> .nav, .header</td> 
  </tr> 
 </tbody> 
</table>

**下面介绍css3中的一些特殊选择器：**

## 3.伪类选择器 ##

用于向某些选择器添加特殊效果，类选择器、属性选择器、伪类选择器，权重为10。

### 3.1 链接伪类选择器 ###

用于给链接添加特殊效果

- a:link      /* 未访问的链接 */
    - a:visited   /* 已访问的链接 */
    - a:hover     /* 鼠标移动到链接上 */
    - a:active    /* 选定的链接 */

### 3.2 结构（位置）伪类选择器 ###

下面是常用的结构伪类选择器，想知道所有的结构伪类选择器可以查阅有关css3文档资料。

- li: first-child      /* 选取属于其父亲的首个子元素的指定选择器 */
    - li: last-child   /* 选取属于其父亲的最后一个子元素的指定选择器*/
    - li: nth-child(n)    /* n就是第几个的意思，这里的n是从1开始；例如li：nth-child(4) 这里指第4个子元素 ；也可以通过公式表达：li: nth-child(2n+2)*/
    - li: nth-last-child(n)  /* 从最后一个开始数，n可以是数字，公式，关键字。 */
    **下面这个与上面的区别就是同类：**
    - li: first-of-type  /* 指定类型li的第一个 */**
    - li: last-of-type  /* 指定类型li的最后一个 */
    - li: nth-of-type  /* 指定类型li的第n个 */

**注意：**  
1.“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。2. :nth-child(n) 中参数只能是n，不可以用其他字母代替。

### 3.3目标伪类选择器 ###

e：target   /* 用于选取当前活动的目标元素 */
    例如：：target {color: red;}

## 4. 属性选择器 ##

属性选择器可以根据元素的属性及属性值来选择元素。

### 4.1简单属性选择 ###

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。  
**例子代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <style type="text/css"> [title] /* 把包含标题（title）的所有元素变为红色*/ { color:red; } a[href] /* 只对有 href 属性的锚（a 元素）应用样式*/ { color: blue; } a[href][title] /* 将同时有 href 和 title 属性的 HTML 超链接的文本设置为黄色*/ { color: yellow; } </style>
    <body>
    	<h2 title="Hello world">Hello world</h2>
    	<hr />
    	<a href="http://www.baidu.com">W3School</a>
    	<hr />
    	<a title="W3School Home" href="http://www.baidu.com">W3School</a>
    </body>
    </html>

**页面显示如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]

### 4.2 根据具体属性值选择 ###

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <style type="text/css"> /* 将指向 Web 服务器上某个指定文档的超链接变成红色*/ a[href="http://www.baidu.com"] { color: red; } /* 与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档*/ a[href="http://www.baidu.com"][title="W3CSchool"] { color: yellow; } </style>
    <body>
    	<a href="http://www.baidu.com">CSS属性选择器</a>
    	<hr />
    	<a href="http://www.baidu.com" title="W3CSchool">W3School</a>
    	<hr />
    </body>
    </html>

**页面显示：**  
![在这里插入图片描述][20190819192422149.PNG]

### 4.3 根据部分属性值选择 ###

部分值属性选择器可以用于任何属性，而不只是class。  
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

p[class~="important"] {color: red;}

**还有一种选择器模块叫做子串匹配属性选择器：**

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[abc^=“def”]</td> 
   <td>选择 abc 属性值以 “def” 开头的所有元素</td> 
  </tr> 
  <tr> 
   <td>[abc$=“def”]</td> 
   <td>选择 abc 属性值以 “def” 结尾的所有元素</td> 
  </tr> 
  <tr> 
   <td>[abc*=“def”]</td> 
   <td>选择 abc 属性值中包含子串 “def” 的所有元素</td> 
  </tr> 
 </tbody> 
</table>

### 4.4 特定属性选择类型 ###

下面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

*[lang|="en"] {color: red;}

<p lang="en">Hello!</p>
    <p lang="en-us">Greetings!</p>

## 5. 伪元素选择器 ##

CSS 伪元素用于向某些选择器设置特殊效果。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-letter</td> 
   <td>向文本的第一个字母添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td>向文本的首行添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>在元素之前添加内容。</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>在元素之后添加内容。</td> 
  </tr> 
 </tbody> 
</table>

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> div { width: 300px; height: 300px; border: 1px solid #000; } div::before { content: "我"; display: inline-block; width: 100px; height: 100px; background-color: pink; } div::after { content: "小猪佩奇"; display: inline-block; width: 100px; height: 100px; background-color: pink; } </style>
    </head>
    
    <body>
        <div>是</div>
    </body>
    
    </html>

**效果如下**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
**注意**：

*  \*\*“first-line"和"first-letter” 伪元素只能用于块级元素。
 *  before 和after 创建一个元素，但是属于行内元素。
 *  伪元素和标签选择器一样，权重为1.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: /images/20211029/1231d953c1fe4709aa84fb3fdd011f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20211029/a3772a2f6dcf46abb537ed84f3d5a136.png
[20190819192422149.PNG]: /images/20211029/dfaa0d1f1cbb4b6bb4a467f0a2664569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20211029/9a62b60e4e354a48b67d742a3523fb26.png