十一，伪元素选择器
2020-12-18 本文已影响0人
好多可乐
一，区别：
伪元素选择器：选择部分内容
伪类选择器：选择元素整体
二，伪元素选择器属性：
（部分浏览器可以识别单冒号，比如before，after，但是不建议这么使用）
1，::selection：选择指定元素中被用户选中的内容
2，::before：可以在内容之前插入新内容
3，::after：可以在内容之后插入新内容
4，::first-line：选择指定选择器的首行
5，::first-letter：选择文本的第一个字符
总结：
1，无论做什么样式设计，除了语法，也要了解效果
2，伪类和伪元素的概念要分清：
1）单冒号，双冒号
2）内容：伪类范围大，伪元素的范围小
<html>
<head>
<link rel="stylesheet" href="test8.css">
</head>
<body>
<p>慕课网1
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪类选择器：选择元素整体</p>
<p>慕课网2
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪类选择器：选择元素整体</p>
<p>慕课网3
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪元素选择器：选择部分内容
伪类选择器：选择元素整体</p>
</body>
</html>
p::before{
content:"你好吗？"
}
p::after{
content: "再见吧！"
}
p::first-letter{
background-color: yellow;
}
p::first-line{
background-color: red;
}
p::selection{
background-color: purple;
}
