css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素

本是古典何须时尚 2023-10-06 22:33 49阅读 0赞

#### 阅读目录 ####

*  CSS 组合选择符
 *   *  后代选择器
     *  子元素选择器
     *  相邻兄弟选择器
     *  后续兄弟选择器
 *  CSS 伪类 (Pseudo-classes)
 *   *  伪类和CSS类
     *  CSS :first-child 伪类
     *   *  匹配第一个 \` 
            
            \` 元素
         *  匹配所有 \`
            
            \` 元素中的第一个 \`  *\` 元素*
         *  匹配所有作为第一个子元素的 \` 
            
            \` 元素中的所有 \`  *\` 元素*
     *  CSS – :lang 伪类
     *  所有CSS伪类/元素
     *   *  CSS3 :checked 选择器匹配每个选中的输入元素
         *  CSS3 :disabled 选择器匹配每个禁用的的元素
         *  CSS3 :empty 选择器择每个没有任何子级的元素
         *  CSS3 :enabled 选择器匹配每个启用的的元素
         *  :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素
         *  :in-range 选择器用于标签的值在指定区间值时显示的样式
         *  :invalid 选择器用于在表单元素中的值是非法时设置指定样式
         *  :last-child 选择器用来匹配父元素中最后一个子元素
         *  :last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素
 *  CSS 伪元素
 *   *  :first-line 伪元素
     *  :first-letter 伪元素
     *  伪元素和CSS类
     *  多个伪元素
     *  CSS – :before 伪元素
     *  CSS – :after 伪元素
     *  所有CSS伪类/元素

## CSS 组合选择符 ##

CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器（以空格     分隔)
      子元素选择器（以大于 > 号分隔）
    相邻兄弟选择器（以加号 + 分隔）
    普通兄弟选择器（以波浪号 ～ 分隔）

### 后代选择器 ###

后代选择器用于选取某元素的后代元素。

以下实例选取所有 `<p>` 元素插入到 `<div>` 元素中:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文字竖直方向居中显示</title>
        <style>
            div p {
          
                background-color:yellow;
            }
        </style>
    </head>
    <body>
    
        <div>
            <p>段落 1。 在 div 中。</p>
            <p>段落 2。 在 div 中。</p>
        </div>
        
        <p>段落 3。不在 div 中。</p>
        <p>段落 4。不在 div 中。</p>
    
    </body>
    </html>

### 子元素选择器 ###

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接 `/` 一级子元素的元素。

以下实例选择了 `<div>` 元素中所有直接子元素 `<p>` ：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文字竖直方向居中显示</title>
        <style>
            div>p {
          
                background-color:yellow;
            }
        </style>
    </head>
    <body>
    
        <h1>Welcome to My Homepage</h1>
    
        <div>
            <h2>My name is Donald</h2>
            <p>I live in Duckburg.</p>
        </div>
        
        <div>
            <span>
                <p>I will not be styled.</p>
            </span>
        </div>
        
        <p>My best friend is Mickey.</p>
    
    </body>
    </html>

### 相邻兄弟选择器 ###

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 `<div>` 元素后的第一个 `<p>` 元素:

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            div+p {
          
                background-color:yellow;
            }
        </style>
    </head>
    <body>
    
        <h1>文章标题</h1>
    
        <div>
            <h2>DIV 内部标题</h2>
            <p>DIV 内部段落。</p>
        </div>
        
        <p>DIV 之后的第一个 P 元素。</p>
        <p>DIV 之后的第二个 P 元素。</p>
    
    </body>
    </html>

### 后续兄弟选择器 ###

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 `<div>` 元素之后的所有相邻兄弟元素 `<p>` :  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 2]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
           div~p {
          
                background-color:yellow;
            }
        </style>
    </head>
    <body>
    
        <p>之前段落，不会添加背景颜色。</p>
        <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
        </div>
        
        <p>段落 3。不在 div 中。</p>
        <p>段落 4。不在 div 中。</p>
    
    </body>
    </html>

## CSS 伪类 (Pseudo-classes) ##

CSS 伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；

当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪类的语法：

selector:pseudo-class {
        property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {
        property:value;}

anchor 伪类  
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

a:link {
        color:#FF0000;} /* 未访问的链接 */
    a:visited {
        color:#00FF00;} /* 已访问的链接 */
      a:hover {
        color:#FF00FF;} /* 鼠标划过链接 */
     a:active {
        color:#0000FF;} /* 已选中的链接 */

注意：

(1) 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

(2 ) 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

(3) 伪类的名称不区分大小写。

### 伪类和CSS类 ###

伪类可以与 CSS 类配合使用：

a.red:visited {
        color:#FF0000;}
     
    <a class="red" href="mybj123.com">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色。

### CSS :first-child 伪类 ###

您可以使用 `:first-child` 伪类来选择父元素的第一个子元素。

注意：在IE8的之前版本必须声明 `<!DOCTYPE>` ，这样 `:first-child` 才能生效。

#### 匹配第一个 `<p>` 元素 ####

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 `<p>` 元素：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
           p:first-child {
          
                color:blue;
            }
        </style>
    </head>
    <body>
    
        <p>This is some text.</p>
        <p>This is some text.</p>
    
    </body>
    </html>

#### 匹配所有 `<p>` 元素中的第一个 `<i>` 元素 ####

在下面的例子中，选择相匹配的所有 `<p>` 元素的第一个 `<i>` 元素：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 2]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            p>i:first-child {
          
                color: blue;
            }
        </style>
    </head>
    <body>
    
    <p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
    <p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
    
    </body>
    </html>

#### 匹配所有作为第一个子元素的 `<p>` 元素中的所有 `<i>` 元素 ####

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 `<p>` 元素中的所有 `<i>` 元素：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 3]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            p:first-child i {
          
                color:blue;
            }
        </style>
    </head>
    <body>
    
    <p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
    <p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
    
    </body>
    </html>

### CSS – :lang 伪类 ###

`:lang` 伪类使你有能力为不同的语言定义特殊的规则。

注意：IE8必须声明 <!DOCTYPE> 才能支持 `:lang` 伪类。

在下面的例子中，`:lang` 类为属性值为 `no` 的 `q` 元素定义引号的类型：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 4]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            q:lang(no) {
          
                quotes: "~""~";
            }
        </style>
    </head>
    <body>
    
    <p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
    
    </body>
    </html>

### 所有CSS伪类/元素 ###

<table> 
 <tbody> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">示例</th> 
   <th align="left">示例说明</th> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>input:checked</td> 
   <td>选择所有选中的表单元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>input:disabled</td> 
   <td>选择所有禁用的表单元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>p:empty</td> 
   <td>选择所有没有子元素的p元素</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>input:enabled</td> 
   <td>选择所有启用的表单元素</td> 
  </tr> 
  <tr> 
   <td>:first-of-type</td> 
   <td>p:first-of-type</td> 
   <td>选择的每个 p 元素是其父元素的第一个 p 元素</td> 
  </tr> 
  <tr> 
   <td>:in-range</td> 
   <td>input:in-range</td> 
   <td>选择元素指定范围内的值</td> 
  </tr> 
  <tr> 
   <td>:invalid</td> 
   <td>input:invalid</td> 
   <td>选择所有无效的元素</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>p:last-child</td> 
   <td>选择所有p元素的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>:last-of-type</td> 
   <td>p:last-of-type</td> 
   <td>选择每个p元素是其母元素的最后一个p元素</td> 
  </tr> 
  <tr> 
   <td>:not(selector)</td> 
   <td>:not(p)</td> 
   <td>选择所有p以外的元素</td> 
  </tr> 
  <tr> 
   <td>:nth-child(n)</td> 
   <td>p:nth-child(2)</td> 
   <td>选择所有 p 元素的父元素的第二个子元素</td> 
  </tr> 
  <tr> 
   <td>:nth-last-child(n) </td> 
   <td>p:nth-last-child(2)</td> 
   <td>选择所有p元素倒数的第二个子元素</td> 
  </tr> 
  <tr> 
   <td>:nth-last-of-type(n) </td> 
   <td>p:nth-last-of-type(2)</td> 
   <td>选择所有p元素倒数的第二个为p的子元素</td> 
  </tr> 
  <tr> 
   <td>:nth-of-type(n)</td> 
   <td>p:nth-of-type(2)</td> 
   <td>选择所有p元素第二个为p的子元素</td> 
  </tr> 
  <tr> 
   <td>:only-of-type</td> 
   <td>p:only-of-type</td> 
   <td>选择所有仅有一个子元素为p的元素</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>p:only-child</td> 
   <td>选择所有仅有一个子元素的p元素</td> 
  </tr> 
  <tr> 
   <td>:optional</td> 
   <td>input:optional</td> 
   <td>选择没有”required”的元素属性</td> 
  </tr> 
  <tr> 
   <td>:out-of-range</td> 
   <td>input:out-of-range</td> 
   <td>选择指定范围以外的值的元素属性</td> 
  </tr> 
  <tr> 
   <td>:read-only</td> 
   <td>input:read-only</td> 
   <td>选择只读属性的元素属性</td> 
  </tr> 
  <tr> 
   <td>:read-write</td> 
   <td>input:read-write</td> 
   <td>选择没有只读属性的元素属性</td> 
  </tr> 
  <tr> 
   <td>:required</td> 
   <td>input:required</td> 
   <td>选择有”required”属性指定的元素属性</td> 
  </tr> 
  <tr> 
   <td>:root</td> 
   <td>root</td> 
   <td>选择文档的根元素</td> 
  </tr> 
  <tr> 
   <td>:target</td> 
   <td>#news:target</td> 
   <td>选择当前活动#news元素(点击URL包含锚的名字)</td> 
  </tr> 
  <tr> 
   <td>:valid</td> 
   <td>input:valid</td> 
   <td>选择所有有效值的属性</td> 
  </tr> 
  <tr> 
   <td>:link</td> 
   <td>a:link</td> 
   <td>选择所有未访问链接</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>a:visited</td> 
   <td>选择所有访问过的链接</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td>a:active</td> 
   <td>选择正在活动链接</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>a:hover</td> 
   <td>把鼠标放在链接上的状态</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>input:focus</td> 
   <td>选择元素输入后具有焦点</td> 
  </tr> 
  <tr> 
   <td>:first-letter</td> 
   <td>p:first-letter</td> 
   <td>选择每个&lt;p&gt; 元素的第一个字母</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td>p:first-line</td> 
   <td>选择每个&lt;p&gt; 元素的第一行</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>p:first-child</td> 
   <td>选择器匹配属于任意元素的第一个子元素的 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:before</td> 
   <td>p:before</td> 
   <td>在每个&lt;p&gt;元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td>p:after</td> 
   <td>在每个&lt;p&gt;元素之后插入内容</td> 
  </tr> 
  <tr> 
   <td>:lang(<i>language</i>)</td> 
   <td>p:lang(it)</td> 
   <td>为&lt;p&gt;元素的lang属性选择一个开始值</td> 
  </tr> 
 </tbody> 
</table>

#### CSS3 :checked 选择器匹配每个选中的输入元素 ####

`:checked` 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

为所有选中的输入元素设置背景颜色：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            input:checked {
          
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
    
    <form action="">
        <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
        <input type="radio" value="female" name="gender" /> Female<br>
        <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
        <input type="checkbox" value="Car" /> I have a car 
    </form>
    
    </body>
    </html>

![在这里插入图片描述][40e93a08dbf64329bb08db7a817fe929.gif_pic_center]

#### CSS3 :disabled 选择器匹配每个禁用的的元素 ####

`:disabled` 选择器匹配每个禁用的的元素（主要用于表单元素）。

设置所有 `type=”text”` 的禁用的输入元素的背景颜色：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 3]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            input[type="text"]:enabled {
          
                background: #ffff00;
            }
    
            input[type="text"]:disabled {
          
                background: #dddddd;
            }
        </style>
    </head>
    <body>
    
    <form action="">
        用户名: <input type="text" value="请输入用户名" /><br>
        密码: <input type="text" value="请输入密码" /><br>
        手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
    </form>
    
    </body>
    </html>

#### CSS3 :empty 选择器择每个没有任何子级的元素 ####

`:empty` 选择器选择每个没有任何子级的元素（包括文本节点）。

指定空的 p 元素的背景色：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 4]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            p:empty{
          
                width:100px;
                height:20px;
                background:#ff0000;
            }
        </style>
    </head>
    <body>
    
        <p></p>
        <p>一个段落</p>
        <p>另一个段落</p>
    
    </body>
    </html>

#### CSS3 :enabled 选择器匹配每个启用的的元素 ####

`:enabled` 选择器匹配每个启用的的元素（主要用于表单元素）。

设置所有 type=”text” 的启用的输入元素的背景颜色：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 5]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            input[type="text"]:enabled {
          
                background:#ffff00;
            }
        </style>
    </head>
    <body>
    
    <form action="">
        用户名: <input type="text" value="请输入用户名" /><br>
        密码: <input type="text" value="请输入密码" /><br>
        手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
    </form>
    
    </body>
    </html>

#### :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素 ####

提示: 和 `:nth-of-type(1)` 是一个意思。

选择的 p 元素是其父元素的第一个 p 元素：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 6]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            p:first-of-type{
          
                background:#ff0000;
            }
        </style>
    </head>
    <body>
    
        <p>一个段落</p>
        <p>另一个段落</p>
    
    </body>
    </html>

#### :in-range 选择器用于标签的值在指定区间值时显示的样式 ####

注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 7]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>显示</title>
        <style>
            input:in-range
            {
          
                border:2px solid yellow;
            }
        </style>
    </head>
    <body>
    
    <h3>:in-range 选择器实例演示。</h3>
    <input type="number" min="5" max="10" value="7" />
    <p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
    
    </body>
    </html>

#### :invalid 选择器用于在表单元素中的值是非法时设置指定样式 ####

注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

![在这里插入图片描述][455add83fd4f46c8917ef8a51bb5facf.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    input:invalid
    {
          
    	border:2px solid red;
    }
    </style>
    </head>
    <body>
    
    <h3> :invalid 选择器实例演示。</h3>
    
    <input type="email" value="supportEmail" />
    
    <p>请输入合法 e-mail 地址，查看样式变化。</p>
    
    </body>
    </html>

#### :last-child 选择器用来匹配父元素中最后一个子元素 ####

:last-child 选择器用来匹配父元素中最后一个子元素。

提示: `p:last-child` 等同于 `p:nth-last-child(1)`。

指定父元素中最后一个 p 元素的背景色：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    p:last-child
    {
          
    	background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    
    </body>
    </html>

#### :last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素 ####

提示: 和 `:nth-last-of-type(1)` 是一个意思

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    p:last-of-type
    {
          
    	background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    
    </body>
    </html>

## CSS 伪元素 ##

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

selector:pseudo-element {
        property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {
        property:value;}

### :first-line 伪元素 ###

:first-line 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 :first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
    {
        
        color:#ff0000;
        font-variant:small-caps;
    }

注意： :first-line 伪元素只能用于块级元素。

注意： 下面的属性可应用于 :first-line 伪元素：

font properties
         color properties
    background properties
      word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

### :first-letter 伪元素 ###

:first-letter 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
    {
        
        color:#ff0000;
        font-size:xx-large;
    }

注意： :first-letter 伪元素只能用于块级元素。

注意： 下面的属性可应用于 :first-letter 伪元素：

font properties
    color properties
    background properties
    margin properties
    padding properties
    border properties
    text-decoration
    vertical-align (only if “float” is “none”)
    text-transform
    line-height
    float
    clear

### 伪元素和CSS类 ###

伪元素可以结合CSS类：

p.article:first-letter {
        color:#ff0000;}
    
    <p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

### 多个伪元素 ###

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
    {
        
        color:#ff0000;
        font-size:xx-large;
    }
    p:first-line 
    {
        
        color:#0000ff;
        font-variant:small-caps;
    }

### CSS – :before 伪元素 ###

:before 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 `<h1>` 元素前面插入wgchen ：

![在这里插入图片描述][f004086948f94ba980b44f7e96bf77fc.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    p:before
    {
          
    	content:"Read this -";
    }
    </style>
    </head>
    
    <body>
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>
    
    <p><b>注意:</b>  :before 作用于 IE8,DOCTYPE 必须已经声明.</p>
    
    </body>
    </html>

### CSS – :after 伪元素 ###

:after 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 `<h1>` 元素后面插入 wgchen：  
![在这里插入图片描述][cc34b4e47df245cd924af29433bde3cb.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
    p:after
    {
           
    content:"- 注意我";
    }
    </style>
    </head>
    
    <body>
    <p>我的名字是 Donald</p>
    <p>我住在 Ducksburg</p>
    
    <p><b>注意：</b> :after在IE8中运行，必须声明 !DOCTYPE </p>
    
    </body>
    </html>

### 所有CSS伪类/元素 ###

<table> 
 <tbody> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">示例</th> 
   <th align="left">示例说明</th> 
  </tr> 
  <tr> 
   <td>:link</td> 
   <td>a:link</td> 
   <td>选择所有未访问链接</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>a:visited</td> 
   <td>选择所有访问过的链接</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td>a:active</td> 
   <td>选择正在活动链接</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>a:hover</td> 
   <td>把鼠标放在链接上的状态</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>input:focus</td> 
   <td>选择元素输入后具有焦点</td> 
  </tr> 
  <tr> 
   <td>:first-letter</td> 
   <td>p:first-letter</td> 
   <td>选择每个&lt;p&gt; 元素的第一个字母</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td>p:first-line</td> 
   <td>选择每个&lt;p&gt; 元素的第一行</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>p:first-child</td> 
   <td>选择器匹配属于任意元素的第一个子元素的 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>:before</td> 
   <td>p:before</td> 
   <td>在每个&lt;p&gt;元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td>p:after</td> 
   <td>在每个&lt;p&gt;元素之后插入内容</td> 
  </tr> 
  <tr> 
   <td>:lang(<i>language</i>)</td> 
   <td>p:lang(it)</td> 
   <td>为&lt;p&gt;元素的lang属性选择一个开始值</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6e4a2d2a9e384449859f9bcf5375a623.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9e416a91e395402f9bd0f5f2adc7d006.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/463dffad07fd4148993baaba890c9ae1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/f596c48d166d44c5afc073acd09c7ddb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/36581c4f80a645829d11c91eef949254.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/babd2955b48b40b1a8a93f63ced7d818.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/540981175027497cbf771738f99ccbb0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/f07ad9b4ad1c43ab9175dc5394967c72.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[40e93a08dbf64329bb08db7a817fe929.gif_pic_center]: https://img-blog.csdnimg.cn/40e93a08dbf64329bb08db7a817fe929.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/4e0c63aca09a430ba72f2a41813d4cf5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/64d5ca1c4d8146c5bf5715317529324d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/64935086f08e4abcaa529de004524490.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/aa85255810444d74a698eefc4cf6f770.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_14_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/b146b895f60748f099c6c341ef0216b6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_14,color_FFFFFF,t_70,g_se,x_16
[455add83fd4f46c8917ef8a51bb5facf.png]: https://img-blog.csdnimg.cn/455add83fd4f46c8917ef8a51bb5facf.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/61e69328b70347d88325f043b49dbff6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0eb9301540634c9681bed3a936e8849f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[f004086948f94ba980b44f7e96bf77fc.png]: https://img-blog.csdnimg.cn/f004086948f94ba980b44f7e96bf77fc.png
[cc34b4e47df245cd924af29433bde3cb.png]: https://img-blog.csdnimg.cn/cc34b4e47df245cd924af29433bde3cb.png