一、伪类
1、定义
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
2、要点
- 格式化DOM树以外的信息。比如：
<a>标签的:link、:visited等。这些信息不存在于DOM树中。 - 不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过
:first-child来获取到。
二、伪元素
1、定义
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。
2、常见的伪元素选择器
-
::first-letter选择元素文本的第一个字（母） -
::first-line选择元素文本的第一行 -
::before在元素内容的最前面添加新内容 -
::after在元素内容的最后面添加新内容 -
::selection匹配被用户选中或者处于高亮状态的部分 -
::placeholder匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效
三、伪类和伪元素的区别
1、伪类是为了弥补CSS选择器的不足，用来更方便地获取信息
<ul>
<li>test1</li>
<li>test2</li>
</ul>
li:first-child {
color: #f00;
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足
2、伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式
.first-letter {
color: #f00;
}
<p>
<span class="first-letter">H</span>ello, World
</p>
上面的代码其实就是：
p::first-letter {
color: #f00;
}
除了上面这个本质区别以外，在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。
四、伪类和伪元素的主要用法
1、伪类
（1）:first-child 匹配第一个子元素
li:first-child {
color: #f00;
}
<ul>
<li>test1</li>
<li>test2</li>
</ul>
（2）:last-child 匹配最后一个子元素
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
li:last-child {
color: #f00;
}
（3）:first-of-type 匹配属于其父元素的第一个特定类型的子元素
p:first-of-type {
color: #f00;
}
<div>
<h1>h1文本</h1>
<p>p文本</p>
</div>
（4）last-of-type 匹配属于其父元素的最后一个特定类型的子元素
h1:last-of-type {
color: #f00;
}
<div>
<h1>h1文本</h1>
<h1>h1文本2</h1>
<p>p文本</p>
</div>
2、伪元素
（1）::before 在被选元素之前插入内容；::after 在被选元素之后插入内容
清除浮动
.clearAll::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearAll {
zoom : 1;
}
画分割线
* {
padding: 0;
margin: 0;
}
.spliter::before,
.spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
计数器
使用CSS实现计数器，用到的属性有：
- counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0
- counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1
- content: 插入生成内容
.chooses {
counter-reset: letters;
}
.chooses input:checked {
counter-increment: letters;
}
.choose span::after {
content: counter(letters);
}
<div class="chooses">
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
<input type="checkbox">d
<input type="checkbox">e
<input type="checkbox">f
<input type="checkbox">g
<input type="checkbox">h
<input type="checkbox">i
<input type="checkbox">j
</div>
<p class="choose">我选择了<span></span>个字母</p>
（2）::first-letter 匹配元素中文本的首字母
::first-letter巧妙控制羊角符号
.price {
display: inline-block;
color: #FF5802;
}
.price:first-letter {
margin-right: 5px;
font-size: xx-large;
vertical-align: -2px;
}
原价：<span class="price">¥399</span>
::before伪元素与::first-letter伪元素共用一个选择器
p:before {
content: '验证：';
}
p:first-letter {
color: #f00;
}
<p>一个选择器可以同时使用多个伪元素</p>
五、css优先级
1、不同级别
- 属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2、同一级别
同一级别中后写的会覆盖先写的样式
3、优先级算法（多个级别的组合）
- !important 优先级最高
- 行内样式的权值为 1000
- ID 选择器的权值为 100
- 类选择器、属性选择器、伪类选择器的权值为 10
- 元素选择器、关系选择器、伪元素选择器的权值为 1
- 通配符选择器的权重为 0
div.test {
background-color:#00f;
width:100px;
height: 100px;
}
.test.test2 {
background-color:#f00;
width:100px;
height: 100px;
}
<div class="test test2"></div>
根据优先级算法中的规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的，如果不同，权值大的覆盖权值小的。div.test 的权值是1+10=11，而 .test.test2 的权值是10+10=20，所以div会应用 .test.test2 变成红色
要点：
- !important的优先级是最高的，但出现冲突时则需比较”四位数“
- 优先级相同时，则采用就近原则，选择最后出现的样式
- 继承得来的属性，其优先级最低
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
