伪元素选择器
/*
伪元素,表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 ：：开头
：：first-letter 表示第一个字母
：：first-line 表示第一行
：：selection 表示给选中的内容设置样式
：：before 元素的开始位置
：：after 元素的最后
-before 和 after 必须结合content属性来使用
（伪元素就是假想一个不存在的元素，比如选中的内容，有什么标签可以说一个选中的内容，谁知道你选了什么，所以这时我们用伪类，假想了selection这个伪类，这个行为，再给它设置样式）
*/
p：：first-letter{
font-size：50px；
}
p：：first-line{
background-color：yellow；
}
p：：selection{
background-color：greenyellow；
}
上面这个div在网页中，本来就是占了一块位置 显示 Hello Hello How are you
然后我们添加这个伪类
div：：before{
content："abc";
color：red；
}
此时就变成了 abcHello Hello How are you ，即在句子的最前面添加了abc，而且只有abc变红了，而且这个abc你是选不中的，它是通过css加的。
div：：after{ 这个就一定在最后面
content："abc"
color:blue;
}
选择器的权重
div{
color:yellow;
}
.red{
color:red;
}
box1{
background-color: orange;
color：orange；
}
/*
样式的冲突
-当我们通过不同的选择器‘，选中相同的元素，并且为相同的样式设置不同的值,此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
比如 div,p,span{ (div的权重是div的，p的权重是p的，span的权重是span的，互不影响)
color:yellowgreen;
}
假设我给div写11个类选择器，那么会累加成110嘛？例如
选择器的累加不会超过其最大的一个数量级,类选择器在高也不会超过id选择器，你怎么加你都只能加那一位，两位数加不到三位数
如果.red{
background-color : red;
}
.d1{
background-color : purple;
}
这种情况,两个都是class选择器，那么会先显示谁？
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 ！important，则此时该样式会获取到最高优先级，甚至超过内联样式，
注意：在开发中这个玩意要慎用！
例如
*{
font-size ： 50px；
}
div{ （本来span也会继承到这个div样式里的字体大小，但是有一个通配符，通配符的优先级大于继承的优先级，所以span标签里的字更大）
font-size : 20px;
}
*/
