伪类和伪元素的用法

// 伪类是用 : 来表示，伪元素是用 :: 来表示

常见的伪类有：

:
hover

:
active

:
focus

:
visited

:
link

:
lang

:
first

child

:
last

child

:
not

:
nth

child

// 伪元素就是不存在DOM文档树中的虚拟元素，它们和HTML元素一样，但是你又无法使用javascript去获取

常见伪元素

::
before

::
after

::
first

letter

::
first

line

用

:
valid
和

:
invalid
来做表单验证

html5 

提供了类似
required
Email
tel
等表单属性

:
required
// 指定具有required属性的表单元素

:
valid
// 指定一个通过匹配正确的所要求的表单元素

:
invalid
// 指定一个不匹配指定要求的表单元素

<
input type

“text”
required
/>

input

:
vaild
{

如果输入文字则变成绿色
border
:
1px
solid green
;
box

shadow
:
inset
10px

0

0
green
;

}
input
:
invaild
{

如果没有输入则是红色
border
:
1px
solid red
;
box

shadow
:
inset
10px

0

0
red
;

}

用:
target
来实现折叠面板

用:
not
来排除其他选择器

:
not
([
readonly
]):
not
([.
disabled
]):
not
([
text
])

等

用:
nth

child
来实现各行变色

:
nth

child
(
2n
+
1
){
background
:
red
;}

:
nth

child
(
2n
){
backgorund
:
blue
;}

用::
selection
来美化选中文本
p
::
selection
{
background
:
red
;
color
:
green
;

}

用::
placeholder
美化输入框占位符样式

::
placeholder
{
color
:
Red
;

}

用::
first

letter
来实现段落首字下沉
p
::
first

letter
{
font

size
:
30px
;
color
:
Red
;
padding
:
20px
;

}

用::
first

line
来标记段落的第一行
p
::
first

line
{
color
:
red
;

}