css3选择器

知识结构总览：（:after是css2写法，::after是css3写法）

css3属性选择器：

[attr=val]

[attr*=val]

[attr^=val]

[attr$=val]

[attr|=val]:属性值等于” val”，或以“ val-”开头的所有字符串属性的元素

[attr~=val]:元素某个属性具有一个或用空格隔开的多个属性值，匹配一个则选中

css3结构性伪类选择器：

root

not

empty

target

first-child

last-child

nth-child

nth-last-child

nth-of-type

nth-last-of-type

only-child

UI元素状态味蕾选择器

E:hover

E:active

E:focus

E:enabled

E:disabled

E:read-only

E:read-write

E:checked

E:default

E:indeteerminate

E:selection

通用兄弟元素选择器

1.属性选择器：

//选择类名以section开头的类

[class^=section]{
background-color: red;
}
//选择以指定格式结尾的文件的显示格式

a[href$=jpg]::after{
content:url(picture.jpg);
}

应用：创建个性化链接样式，在不同的文档类型后面加上对应的图标。

2.结构性伪类选择器：

需要先理解什么的是伪类选择器和伪元素选择器！

伪类选择器：有4个动态伪类选择器（:link、:visited、:hover、:active），普通的类选择器可以为相同的元素指定不同的样式，名称可以随便取名，但是伪类选择器是已经定义好的选择器，不能随便起名。

伪元素选择器：是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器（4个）。

//first-line：指定块级元素首行文字的样式

p::first-line{
color:red;
}
//first-letter：指定块级首个字母或第一个字的样式

p::first-letter{
color:#000;
}
//before伪元素

p::before{
content:'头部文字内容';
}
//after伪元素

p::after{
content:'尾部文字内容';
}

结构性伪类选择器总览：（11种）

最基本的结构性伪类选择器：root、not、empty、target

伪类选择选择器：first-child、last-child、nth-child、nth-last-child

伪类选择器：nth-of-type、nth-last-of-type

伪类选择器:only-child

1.最基本的结构性伪类选择器:

root：将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的html部分。

//html跟元素显示灰色，body显示淡蓝色（第一张效果图)
:root{
background:#ccc;
}
body{
margin:0;padding: 0;
background: #7CA6CF;
color:#fff;
}
//若只是指定body而没有指定root选择器，整个页面会变为淡蓝色(图二)
body{
margin:0;padding: 0;
background: #7CA6CF;
color:#fff;
}

效果图：





not：想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用not样式。

//除h1外背景色都为黄色
body *:not(h1){
background-color: yellow;
}

empty：指定当元素内容为空白时使用的样式。

bootstap中使用的实例 :http://v3.bootcss.com/components/#badges

target：对页面中某个target元素（锚点）指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效。

应用：制作手风琴效果、高亮显示脚注（区域块）、tabs效果、幻灯片效果、灯箱效果、相册效果。

http://red-team-design.com/dist/uploads/2010/12/css-target-pseudo-class.html#id3

2.伪类选择选择器（子元素选择器）：first-child、last-child、nth-child、nth-last-child

//指定序号的子元素使用样式
nth-child(n){
color:red;
}

//对所有第奇数个子元素或第偶数个子元素使用样式
nth-child(odd){
color:red;
}
nth-child(even){
color:blue;
}
//循环使用样式(4组一循环)
nth-child(4n+1){
color:#000;
}
nth-child(4n+2){
color:#000;
}
nth-child(4n+3){
color:#000;
}
nth-child(4n+4){
color:#000;
}

3. 伪类选择器：nth-of-type、nth-last-of-type

使用nth-child选择器时候，在计算子元素是第奇数个元素还是第偶数个元素的时候，连父元素中的所有子元素（不同的元素类型）都一起计算，达不到预期效果。

故使用nth-of-type和nth-last-of-type选择器可以避免这类问题。只针对同类型的子元素进行计算。

小灶：结构性伪类选择器中，有4个伪类选择器接收参数n:

:nth-child(n)

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

参数n可以是整数（1，2，3）、关键字（odd,even）、公式(2n+1、-n+5),但是参数n的起始值始终是1，而不是0。参数n小于等于0将不匹配任何元素。

七种情形：

参数n为具体的数值： :nth-child(3)

参数n为表达式： “n*length”

参数 n 为表达式：“n+length”

参数 n 为表达式：“-n+length”

参数 n 为表达式：“n*length+b”

参数 n 为关键词：“odd”

参数 n 为关键词：“even”

/*对应实例：*/

//选择第3个元素：
:nth-child(3)

//选择n的倍数
:nth-child(2n)

//选择大于或等于length的元素
:nth-child(n+3)

//选择小于或等于length的元素
:nth-child(-n+3)

//表示隔length个元素选中第n*length+b个元素，其中b为设置的偏移值
:nth-child(2n+1)

//选择奇数元素
:nth-child(odd)
:nth-child(2n-1)
:nth-child(2n+1)

//选择偶数元素
:nth-child(even)
:nth-child(2n)

4. 伪类选择器:only-child和only-of-type

“only-child”:当某个父元素中只有一个子元素时使用的样式。可以用来代替 nth-child(1)、nth-last-child(1) 选择器。

“:only-of-type”:用来选择一个元素是它的父元素的唯一一个相同类型的子元素,即表示一个元素有很多个子元素，而其中只有一个子元素是唯一

UI元素状态伪类选择器（11种）

E：hover、E：active、E：focus

E：enabled、E：disabled

E：read-only、E：read-write

E：checked、E：default、E：indeterminate

E:selection

应用： UI 元素状态伪类选择器目前主要针对应用在表单元素上，让表单更可用、易用和好用，同时让表单设计更漂亮。

bootstrap表单：http://v3.bootcss.com/css/#forms

通用兄弟元素选择器

指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

div~p{
background: #00ff00;
}

总结：系统理解好CSS3中的选择器，理清结构分类，便于学习，以后的知识应用，案例实战。其中，在结构性伪类这部分是需要注意的，例如，伪类和伪元素的正确理解，各类型的分类罗列，各自特性的熟悉掌握等。UI元素状态伪类选择器需要在实战中深入加强理解运用！