CSS3学习系列之选择器（二）

• first-child选择器和last-child选择器

first-child指定第一个元素。last-child指定最后一个子元素。

例如：

DOCTYPE html>html lang='en'>head> meta charset='UTF-8'> title>first-child选择器与last-child选择器使用示例title> style> li:first-child{ background-color: yellow; } li:last-child{ background-color: skyblue; } style>head>body>h2>列表Ah2>ul> li>列表项目1li> li>列表项目2li> li>列表项目3li> li>列表项目4li> li>列表项目5li>ul>body>html>

•   nth-child选择器和nth-last-child选择器

指定父元素中某个指定序号的子元素来指定样式。指定方法如下所示：

nth-child(n){ //指定样式}<子元素>:nth-last-child(n){//指定样式}

例如：

DOCTYPE html>html lang='en'>head> meta charset='UTF-8'> title>nth-child选择器与nth-last-child选择器使用示例title> style> li:nth-child(2){ background-color: yellow; } li:nth-last-child(2){ background-color: skyblue; } style>head>body>h2>列表Ah2>ul> li>列表项目1li> li>列表项目2li> li>列表项目3li> li>列表项目4li> li>列表项目5li>ul>body>html>

•  对所有第奇数个子元素或第偶数个子元素使用样式

使用方法如下：

nth-child(odd){//指定样式}//所有正数下来的第偶数个子元素<子元素>:nth-child(even){//指定样式}//所有倒数上去的奇数个子元素<子元素>:nth-last-child(odd){//指定样式}//所有倒数上去的第偶数个子元素<子元素>:nth-last-child(even){//指定样式}

例如：

DOCTYPE html>html lang='en'>head> meta charset='UTF-8'> title>nth-child选择器与nth-last-child选择器使用示例title> style> li:nth-child(odd){ background-color: yellow; } li:nth-child(even){ background-color: skyblue; } style>head>body>h2>列表Ah2>ul> li>列表项目1li> li>列表项目2li> li>列表项目3li> li>列表项目4li> li>列表项目5li>ul>body>html>

•  选择器nth-of-type和nth-last-of-type

nth-child在使用过程中会有问题，问题产生的原因是，nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。CSS3中使用nth-of-type选择器和nth-last-of-type选择器可以避免这类问题的发生，使用这两个选择器的时候，CSS3在计算子元素时第奇数个子元素还是偶数个子元素的时候，就只针对同类型的子元素进行计算，使用方法如下：

h2:nth-of-type(odd){ background-color:yellow;}h2:nth-of-type(even){ background-color:skyblue;}

• 循环使用样式

li:nth-child(4n+1){background-color:yellow}li:nth-child(4n+2){ background-color:limegreen;}li:nth-child(4n+3){ background-color:red;}li:nth-child(4n+4){ background-color:white;}

这样样式会隔4循环样式。奇数个和偶数个也可以改写成下面方式：

//所有正数下来的第奇数个子元素<子元素>:nth-child(2n+1){//指定样式}//所有正数下来的第偶数个子元素<子元素>:nth-child(2n+2){//指定样式}//所有倒数上去的第奇数个子元素<子元素>:nth-last-child(2n+1){//指定样式}//所有倒数上去的第偶数个子元素<子元素>:nth-last-child(2n+2){//指定样式}

• only-child选择器

only-child选择是指定当某个元素中只有一个子元素时才使用的样式。例如：

DOCTYPE html>html lang='en'>head> meta charset='UTF-8'> title>nth-child选择器与nth-last-child选择器使用示例title> style> li:only-child{ background-color: yellow; } style>head>body>h2>列表Ah2>ul> li>列表项目1li>ul>body>html>

•  UI元素状态伪类选择器

UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。在CSS3中，共有11种UI元素状态伪类选择器，分别是E:hover、E:active、E :focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。

•  选择器：E:hover、E:active和E:focus

E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。

E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。

E:focus选择器用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入的时候使用。例子如下：

DOCTYPE html>html lang='en'>head> meta charset='UTF-8'> title>E:hover选择器、E:active选择器与E:focus选择器使用示例title> style> input[type='text']:hover { background-color: greenyellow; } input[type='text']:focus { background-color: skyblue; } input[type='text']:active{ background-color: yellow; } style>head>body>form> p>姓名：input type='text' name='name'>p> p>地址：input type='text' name='address'>p>form>body>html>