前端学记之CSS-选择器

选择器分类：

1. 简单选择器
2. 伪元素选择器
3. 组合选择器

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
}