伪元素:first-letter注意事项

最新推荐文章于 2020-11-30 15:24:35 发布

Wangdanting123

最新推荐文章于 2020-11-30 15:24:35 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/Wangdanting123/article/details/52778378

版权

1.首行只在 block-container box内部才有意义, 因此 ::first-letter 伪元素只在display属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge">
    <title>Title</title>
    <style>
        div:first-letter {
            font-size: 20px;
            color: red;
        }
        span:first-letter{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
   <div>dghskhksjhdkjhskhdfkhks</div>
   <span>dgsdgssdgsgsdfsefvfdfs</span>
    <div><a>shfkshgkjhsgkjhkhjgk</a></div>
</body>
</html>

2. ::before 伪元素和 content 属性结合起来有可能会在元素前面注入一些文本. 如此, ::first-letter将会匹配到content文本的首字母.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge">
    <title>Title</title>
    <style>
        div:before {
            content: "jdk";
        }
        div:first-letter {
            font-size: 20px;
            color: red;
        }

    </style>
</head>
<body>
  <div>kshgkshdkjhksjhshj</div>
</body>
</html>