选择器的使用

层级选择器

/*子代选择器：选出box下的所有li标签*/.box>li{background-color: aliceblue;}/* 选出box后面的第一个兄弟li标签 */.box+li{background-color: aliceblue;}/* 选出box后面的所有兄弟li标签 */.box~li{background-color: aliceblue;}

属性选择器

/* 属性选择器:选出所有带有class属性的标签 class也可以为其他属性 */[class]{background-color: aliceblue;}/* 属性选择器:选出所有带有class属性的div标签 class也可以为其他属性 */div[class]{background-color: aliceblue;}/* 属性选择器:选出所有带有class=box1属性的div标签 class也可以为其他属性 */div[class=box1]{background-color: aliceblue;}/* 属性选择器:选出所有class属性以b开头的div标签 class也可以为其他属性 */div[class^=b]{background-color: aliceblue;}/* 属性选择器:选出所有class属性以b结尾的div标签 class也可以为其他属性 */div[class$=b]{background-color: aliceblue;}/* 属性选择器:选出所有class属性包含b的div标签 class也可以为其他属性 */div[class*=b]{background-color: aliceblue;}/* 属性选择器:选出所有带有class属性中包含box1的div标签 class也可以为其他属性 */div[class~=box1]{background-color: aliceblue;}

伪类选择器

结构伪类选择器

/* 结构伪类选择器 *//* 选择box下的最后一个div标签 */.box div:last-child{background-color: aliceblue;}/* 找到第一个li标签 */li:first-child{background-color: aliceblue;}/* 找到最后一个li标签 */li:last-child{background-color: aliceblue;}/* 找到第二个li标签 */li:nth-child(2){background-color: aliceblue;}/* 找到第偶数个li标签，2n可以用even代替 */li:nth-child(2n){background-color: aliceblue;}/* 找到第奇数个li标签，2n-1可以用odd代替 */li:nth-child(2n-1){background-color: aliceblue;}

目标伪类选择器

/* 目标伪类选择器：隐藏锚点的导向位置 */
div.content{display: none;
}
div.content:target{display: block;
}