选择器分类:
- 简单选择器
- 伪元素选择器
- 组合选择器
1、简单选择器:
- 标签、类选择器、id选择器、通配符选择器
p{//标签选择器
color: red;
}
.pic{//类选择器
color: red;
}
#id{//id选择器
color: black;
}
*{//通配符选择器
color: red;
}
- 属性选择器
[attr]{//属性选择器
background-color: #eeeeee;
}
[attr=val]{//属性选择器:attr值为val
background-color: #eeeeee;
}
[attr~=val]{//属性选择器:attr值包含val
background-color: #eeeeee;
}
[attr|=val]{//属性选择器:attr值为val,或val-开头
background-color: #eeeeee;
}
[attr^=val]{//属性选择器:attr值以val开头
background-color: #eeeeee;
}
[attr$=val]{//属性选择器:attr值以val结尾
background-color: #eeeeee;
}
[attr*=val]{//属性选择器:attr值包含val
background-color: #eeeeee;
}
2、伪类选择器
a:link{//href一定有值,只用于链接
color: black;
}
a:visited{//表示访问过,只用于链接
color: red;
}
a:hover{//鼠标移动到
color: green;
}
a:active{//鼠标点击到
color: orange;
}
:enabled{//元素可用的
color: black;
}
:disabled{//元素不可用
color: beige;
}
:checked{//元素被选中
color: #222222;
}
li:first-child{//第一个
color: red;
}
li:last-child{//最后一个
color: red;
}
li:nth-child(3n+1){//正序
color: red;
}
li:nth-last-child(3n+1){//倒序
color: red;
}
:only-child{//只有一个子元素的项
color: red;
}
dd:first-of-type{//第一个dd元素
color: red;
}
h2+p{//兄弟选择器,+在同一层级,~之间的
color: red;
}
//不常用选择器
:empty{//为空的
}
:root{//html根标签
}
:not(dd){//不包含dd标签
}
:target{//目标元素
}
:lang(d){//值为d的元素
}
3、伪元素选择器
::first-letter{//第一个
}
::first-line{//第一行
}
::before{
content: "在前面插入内容";
}
::after{
content: "在后面插入内容";
}
::selection{//被选中的元素
}
4、选择器分组
h1,h2,h3{
color: red;//h1
color: red;//h2
color: red;//h3
}