选择器的补充

伪元素

不常用

::first-letter

表示选中第一个字符

p::first-letter{
    color: #f00;
    font-size: 35px;
}
……
<p>
  知天德骨得招太，第。
</p>

::first-line

表示选中第一行

.p1::first-line{
      color: #f00;
      font-size: 30px;
}
……
<p>学斗是，韩助一在者。</p>
<p class="p1">玉馆娘大作词话为得。</p>

::selection

表示选中的内容

选中前

p::selection{
    color: #f00;
}
……
<p>明面览打我辜愿太见。</p>

选中后

常用

::after

在元素的后面添加

p::after{
   content: '上愚罪，慧得留，了。';
   color: #f00;
}
……
<p></p>

::before

在元素的前面添加

p::before{
   content: '上愚罪，慧得留，了。';
   color: #f00;
}
……
<p>125</p>

::before和::after必须配合content使用，content可以为空

优先级问题

选择器	优先级
内联样式	1000
id	100
类/伪类/属性选择器	10
标签	1
通配选择器(*{})	0
继承的样式	没有优先级

特殊情况：

1、交集选择器的优先级是累加计算的

2、并集选择器的优先级是分别计算的

3、当选择器的优先级相同时，谁在下面，谁生效(因为代码是从上往下执行的，下面的会将上面的样式覆盖)

4、优先级累加，永远不会进位(不会超过他的上一级)

元素的继承

定义：为一个元素设置样式，同时也会应用到它的后代元素上

优势：方便程序员的开发，将一些通用的样式统一设置到公共的祖先元素上，后代元素就可以继承

注意：

并不是所有的样式都会被继承，比如：大小相关的，布局相关等关系不会被继承

可继承的：font-size(字体大小)、font-family(字体的类型 如：‘仿宋体’)、color、line-height(行高)

不可继承：border、padding、margin、width、height