【web学习笔记】034-伪元素选择器

liuzhengyuan · 发表于 2020-1-22 11:06:16

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 liuzhengyuan 于 2020-3-8 20:16 编辑

《零基础入门学习web开发》第35讲初学CSS的噩梦I | 学习笔记

先看这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>035-::first-line</title>
    
</head>
<body>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam explicabo hic perferendis dicta, quisquam repudiandae maxime dolor sit recusandae cumque at amet esse assumenda quibusdam praesentium culpa quos, nulla neque?</p>
    <a href="https://ilovefishc.com">hello</a>
</body>
</html>

效果：

1,::first-line
在head标签里加上

<style>
        ::first-line {
            background-color: red;
            color: green;
        }
</style>

就是这样：

这些伪元素选择器对<a>标签这类不起作用哦

2,::first-letter
跟 ::first-line 差不多，first-letter 就是给第一个字母设置样式.
加上

::first-letter {
            font-size: larger;
}

首字母变大。

3,::before, ::after
在某个元素前或后插入

a::before {
            content: url(https://xxx.ilovefishc.com/album/201904/15/144712l5r0iy5r5qc60r92.gif);
        }
        a::after {
            content: "你好";
        }

效果：

4,::selection

::selection {
            background-color: pink;
            color: red;
        }

效果：

结束啦

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 【web学习笔记】034-伪元素选择器

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: