css3选择器

1、属性选择器

/*    [属性名称=值]{    设置样式    }     */a[href='a.txt']{    color:yellow;}/* 拿到以什么开头的值*/a[href^='a']{    color:greenyellow;}/* 以什么结尾 */a[href$='3']{    color:pink;}/* 属性的值中带带有某个字符串 */a[href*='m']{    color:red;}

2、伪类选择器

/*获取到第一个设置样式*/li:first-child{    color:red;}/*  获取最后一个 */li:last-child{    color:yellow;}/* 获取第n个 */li:nth-child(7){    color:red;}li:nth-of-type(2){    background:green;}li:nth-child(7n){    color:red;}li:nth-child(7n-1){    color:red;}/*偶数*/li:nth-child(2n){    color:red;}li:nth-child(even){    color:red;}/*奇数*/li:nth-child(2n+1){    color:red;}li:nth-child(odd){    color:green;}/* 拿到空的元素*/li:empty{    background:red;}/*选中的是当前处于锚点位置的元素*//*在某些特定场合灵活使用会带来很好的效果*//*学习它的目的只是知道有这个一个特殊的选择器*/h2:target{    color:red;}/*not()   拿到没有指定的 类样式 的元素,并且给它设置样式.*/li:not(.special){    background:red;}/*伪元素before,after    before,after一定要结合 content属性一起使用。默认是行类元素 */div::before{    content:'';    height:100px;    width:100px;    background:red;    display:block;}div::after{    content:'';    height:100px;    width:100px;    background:yellow;    display:block;}/*first-letter 获取首个字符，给它设置样式。*/li:first-letter{    color:red;}/*first-line 获取第一行文字，给它设置样式。*/div::first-line{    color:red;    font-size:40px;}/*浏览器选中文字样式设置*/div::selection{    color:red;    background:yellow;    font-size:40px;}