【web学习笔记】034-伪元素选择器
本帖最后由 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;
}
效果：
结束啦{:10_277:}
页:
[1]