// 伪类是用 : 来表示,伪元素是用 :: 来表示
常见的伪类有:
:
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
;
}