先来看一下如标题三个选择器的写法：
.one类选择器 :hover伪类选择器 ::伪元素选择器
类选择器是一个点，伪类选择器是两个点，伪元素选择器是三个点。
接下来我们分别做一个介绍：
一、类选择器
类选择器最大的优势是可以给 元素对象 定义单独或相同的样式。
.类名 { 属性1: 属性值1; 属性2: 属性值2;}
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名css选择器。
3.不要用纯数字、中文等命名，尽量使用英文字母来表示。
二、伪类选择器
伪类选择器是用于向某些选择器添加特殊的效果。
比如给链接添加特殊效果；比如可以选择第1个、第n个元素。
链接伪类选择器
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
注意：以上顺序尽量不要颠倒，按照 lvha 的顺序。
love hate 爱上了讨厌 记忆法 或者 lv 包包非常 hao。
结构（位置）伪类选择器
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个字元素，不论元素的类型
:nth-last-child(n) 选择器匹配属于其元素的第n个字元素的每个元素，不论元素类型，从最后一个子元素开始计数。n可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: blue;
}
li:last-child { /* 选择最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 */
color: red;
}
目标伪类选择器
:target 目标伪类选择器：选择器可用于选取当前活动的目标元素。
:target {
color: purple;
font-size: 14px;
}
三、伪元素选择器(::brfore和::after)
之所以被称为伪元素是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素是一样的，可以对其使用诸如页面元素一样的css样式，表面看上去貌似是页面的某些元素展现出来的效果，实际上是css样式展现的行为，因此被称为伪元素。
伪元素在body的结构是无法审查的，只能在css中看到样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div::before {
content: "刘昊然";
background-color: pink;
border: 1px solid red;
width: 100px;
height: 100px;
display: block;
}
div::after {
content: "你们的";
display: block;
width: 50px;
height: 50px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div>是</div>
<p></p>
</body>
</html>
注意：
1.伪元素::before和::after添加的内容默认是inline元素，即行内元素；
2.伪元素的content属性是其的内容；设置::before和::after时必须设置其content属性，否则伪元素就不起作用。
综上可以看出：
类选择、伪类选择器就是选取对象，做效果使用的。
伪元素选择器 本质上是 插入一个元素（标签or盒子） 只不过是行内元素（ span a ）形式的盒子，若要给伪元素宽和高的话，得把其转化为快元素dispaly:block。
网友评论