css伪类和伪元素
做为前端人员，天天要与满屏的标签、元素打交道，经过元素与样式类的结合，呈现出一个个美丽优雅的页面，其中也包括css伪类和伪元素的应用，随着前端的发展深刻，开发人员运用愈来愈多的整合技术，使得咱们的工做更快捷高效高逼格，下面就来整理一下css中伪类和伪元素的应用；css
css伪类：html
什么是css伪类(pseudo-class),伪类就是定义个元素的特殊状态的存在，这个特殊状态乍一听觉得是什么高科技的玩意，但其实很好理解，好比一个input选框,默认是enable&unchecked，若是是被禁用了被勾选了，就变成特殊状态了，好吧，给个最容易理解也是官方的案例看看：前端
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/* 未访问的连接样式 */
a:link {
color
:
#FF0000
;
}
/* 访问过的连接样式 */
a:visited {
color
:
#00FF00
;
}
/* 鼠标滑事后的连接样式 */
a:hover {
color
:
#FF00FF
;
}
/* 选中的连接样式 */
a:active {
color
:
#0000FF
;
}
|
如例所示，能够给元素定义相应的伪元素，而且只有在处于定义状态的时候才会生效，调试伪元素的样式的时候，能够借助控制台调控元素的状态：jquery
而且伪类能够和类搭配使用：字体
|
1
2
3
|
a.highlight:hover {
color
:
#ff0000
;
}
|
还有个比较特别的伪元素lang，貌似这个平时用的比较少，就是经过定义不一样的lang类型来定义样式：ui
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
q:lang(en) {
color:red
}
</
style
>
</
head
>
<
body
>
<
p
>呵呵<
q
lang
=
"en"
>嘿嘿</
q
>哈哈</
p
>
</
body
>
</
html
>
|
就是下面的效果：url
固然css伪元素不止这些，写法也多种多样，不过通常经常使用的也只有前几个，下面是整理到的css伪类；spa
css 伪类集合：3d
| 伪类 | 例子 | 描述 |
|---|---|---|
| :active | a:active | 选中状态 |
| :checked | input:checked | 勾选状态 |
| :disabled | input:disabled | 禁用状态 |
| :empty | p:empty | p元素无子元素 |
| :enabled | input:enabled | 激活状态 |
| :first-child | p:first-child | 父级下的第一个p元素 |
| :first-of-type | p:first-of-type | 父级下第一个p类型元素 |
| :focus | input:focus | 选中状态，光标位于当前 |
| :hover | a:hover | hover状态 |
| :in-range | input:in-range | 定义在一段范围内的值的input |
| :invalid | input:invalid | 全部符合验证条件的元素 |
| :lang(language) | p:lang(it) | 经过lang(it)来定义的p |
| :last-child | p:last-child | 父级下的最后一个p元素 |
| :last-of-type | p:last-of-type | 父级下最后一个p类型元素 |
| :link | a:link | 未访问的连接 |
| :not(selector) | :not(p) | 非p元素 |
| :nth-child(n) | p:nth-child(2) | 父级下的第n个p元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 父级下的倒数第二个元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 父级的第二个p元素，从最后一个子元素算起 |
| :nth-of-type(n) | p:nth-of-type(2) | 其父级的第二个子元素 |
| :only-of-type | p:only-of-type | 当p是其父级的惟一元素类型 |
| :only-child | p:only-child | 当p是其父级的惟一元素 |
| :optional | input:optional | 没有“required”标示的input |
| :out-of-range | input:out-of-range | 不在特定值范围的input |
| :read-only | input:read-only | 带有“readonly”标示的input |
| :read-write | input:read-write | 没有有“readonly”标示的input |
| :required | input:required | 带有“required”标示的input |
| :root | root | 页面根元素 |
| :target | #news:target | 选择的元素锚点 |
| :valid | input:valid | 符合验证的元素 |
| :visited | a:visited | 访问过的 |
其实仍是蛮多的哈，不过确实通常开发中经常使用的只有几种，反正我是没用完，能达到预想中的开发效果就行，没必要强制追求的，有时候还能够配合jquery进行css操做，写法也很简便；调试
接下来看一下伪元素(pseudo-element)，了解过伪类的定义后，就更好理解伪元素了，css伪元素就是定义元素"一部分"的特殊样式，好比定义元素的第一个字符，第一行，在元素的before、after、center中定义内容；语法以下：
|
1
2
3
|
selector::pseudo-element {
property:value;
}
|
好比定义一个p的第一行：
|
1
2
3
|
p::first-line {
color
:
#ff0000
;
}
|
向一个元素前或者元素后插入部份内容：
|
1
2
3
|
i::before {
content
:
url
(pic.gif);
}
|
这种方式常配合字体图标出如今网页中，以一个元素做为载体，将字体图标加入到元素区域显示,如图所示：
伪元素很少却应用普遍，意思也好懂，示例以下：
| 伪元素 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | p元素后插入内容 |
| ::before | p::before | p元素前插入内容 |
| ::first-letter | p::first-letter | p元素中第一个字符 |
| ::first-line | p::first-line | 第一行 |
| ::selection | p::selection | 用户选中区域 |
原文地址：http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/
- 1. CSS伪类和伪元素
- 2. css—伪类和伪元素
- 3. CSS 伪类与伪元素
- 4. CSS伪类与伪元素
- 5. css伪类与伪元素
- 6. CSS 伪类 伪元素
- 7. CSS——伪元素与伪类
- 8. 【CSS】伪类与伪元素
- 9. css伪类和伪元素的学习
- 10. 细说CSS伪类和伪元素
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 如何伪造ARP响应？ - TCP/IP教程
- • Kotlin学习（二）基本类型
- • IntelliJ IDEA 代码格式化配置和快捷键
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS伪类和伪元素
- 2. css—伪类和伪元素
- 3. CSS 伪类与伪元素
- 4. CSS伪类与伪元素
- 5. css伪类与伪元素
- 6. CSS 伪类 伪元素
- 7. CSS——伪元素与伪类
- 8. 【CSS】伪类与伪元素
- 9. css伪类和伪元素的学习
- 10. 细说CSS伪类和伪元素