css 3 选择器小结

今天把css3的选择器学习了一下。现在做个整理。

1.css3中的属性选择器

（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>

未完待续、、、