css 3 选择器小结
今天把css3的选择器学习了一下。现在做个整理。
1.css 3中的属性选择器
（1）[att^=val]----如果元素用att表示的属性值属性值得开头字符为val，则改元素使用这个样式。
例：
[id^=s]{background:#0C6; } （2）[att*=val]-----如果元素用att表示的属性之属性值中包含val指定的字符的话，则该元素使用此样式
例：
[id*=s]{background:#0C6; } （3）[att$=val]-----如果元素用att表示的属性之属性值的末尾包含指定字符val，则该元素使用此样式
例：
/*a标签的href超链接的地址的末尾是"/"或者是"htm"或者是"html",使用此样式*/ a[href$=\/]:after,a[href$=html]:after{ content:"想睡"; } /*a标签的href超链接的地址的末尾是jpg,使用此样式*/ a[href$=jpg]:after{ content:"困了"; } 2.结构性伪类选择器
（1）first-line
/*对第一行设置样式*/ p:first-line{color:#000; } （2）first-letter
/*对第一个字或字母或日文使用样式*/p:first-letter{color:#000;font-size:24px;} （3）before
/*p标签之前插入文字*/p:before{content:"插入文字 ";} （4）after
/*p标签之后插入文字*/p:after{content:"插入文字 ";} 3.四个基本的结构选择器，root/not/empty/target
/*root结构选择器。指定整个网页的背景颜色 如果你设置body的背景色后，那么body的背景色，只会显示有数据的地方*/:root{background:#ccc;}/*not结构选择器。排除body和* 下面的h1不使用此样式*/body *:not(h1){background-color:#0CF;}/*empty结构选择器。当元素内容为空白时，使用样式.可以使用在表格中，用来设置摸个单元格为空时的样式*/:empty{background:#C33;}/*target结构选择器，对页面中某个target元素（该元素的id呗当做页面中的超链接使用）指定样式。该样式，只在用户点击了页面的超链接，并且调准到target页面时起作用*/:target{background:#993;}4.first-child / last-child / nth-child和nth-last-child选择器
/*单独指定第一个子元素*/li:first-child{background:#fff;}/*单独指定最后一个子元素*/li:last-child{background:#fff;}/*对指定序号的子元素使用样式,根据你传入的值不同，他还可以对所有的第奇数个子元素或第偶数个子元素使用样式*/li:nth-child(3){background:#000;color:#fff;}/*对指定序号的子元素使用样式,根据你传入的值不同，他还可以对所有的第奇数个子元素或第偶数个子元素使用样式 基数odd,偶数even*/li:nth-last-child(2){background:#03F;color:#fff;}在这里有个问题：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。
使用它们替换：
/*使用它们替换nth-child和nth-last-child避免出现问题。这两个选择器在计算时，只针对同类型的子元素进行计算*/h2:nth-of-type(odd){background:yellow;}h2:nth-of-type(even){background:skyblue;}5.循环使用样式。
/*这里是吧nth-child中的n替换成xn+y;x=每几个一组;y=第几组;共12个li*/li:nth-child(4n+1){background:blue;}li:nth-child(4n+2){background:#ccc;}li:nth-child(4n+3){background:#0CC;}6.唯一选择器。only-child
li:only-child{background:yellow;}/*html代码：*/<ul><li>唯一列表项目</li></ul><ul><li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li></ul>未完待续、、、