非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.10 伪元素first-line - first-letter

我会带着你远行 2024-03-25 14:11 46阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.10 伪元素::first-line - ::first-letter
             *   *  8.10.1 伪元素（pseudo-elements）
                 *  8.10.2 伪元素 - ::first-line - ::first-letter(了解)

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

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

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

###### 8.10.1 伪元素（pseudo-elements） ######

*  常用的伪元素有
    
     *  :first-line、::first-line
     *  :first-letter、::first-letter
     *  :before、::before
     *  :after、::after
 *  为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

###### 8.10.2 伪元素 - ::first-line - ::first-letter(了解) ######

::first-line可以针对首行文本设置属性

::first-letter可以针对首字母设置属性

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        p {
          
          width: 100px;
        }
    
        p::first-letter {
          
          color: red;
          font-size: 20px;
        }
    
        p::first-line {
          
          background-color: orange;
        }
      </style>
    </head>
    
    <body>
      <p>我是p元素,哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </body>
    
    </html>

[a478c076014b4709a10c89863d3fbf65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/483d65b7042c4d0d828f2ebd4700beea.png
[afabdbca369e4ea7b36d6b294dee7c7d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0205669bef7047b3bea13533a8889f8d.png