前端学记之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}