CSS3学习笔记1：结构性伪类选择器
第2节.结构性伪类选择器
在学习结构性伪类选择器之前，先了解2个概念：sCSS中的伪类选择器&伪元素
伪类选择器：CSS中已经定义好的选择器,不能随便取名
常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active
伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器
CSS中有如下四种伪元素选择器：
· first-line:为某个元素的第一行文字使用样式；
· first-letter:为某个元素中的文字的首字母或第一个字使用样式；
· before:在某个元素之前插入一些内容；
· after: 在某个元素之后插入一些内容；
使用方法：选择器：伪元素{样式}
例如：p:first-line{ color:#ff0000;} //下面提到的选择器使用方法类似
OK，下面进入正题
-------------------------------------------------------------------------------------------------------------------
结构性伪类选择器
·PartI : 四个最基本的：root、not、empty、target
·PartII : first-child、last-child、nth-child、nth-last-child、
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
·PartIII: nth-of-type、nth-last-of-type
·PartIV : 循环使用样式
·PartV : only-child
下面依次介绍：
-------------------------------------------------------------------------------------------------------------------
PartI 四个最基本的结构性伪类选择器
root:将样式绑定到页面的根元素中。
所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分
not: 想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用not样式
empty:指定当元素内容为空白时使用的样式
target:对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效
-------------------------------------------------------------------------------------------------------------------
PartII
1.单独指定第一个子元素、最后一个子元素的样式[2个]
·first-child:对一个父元素中的第一个子元素指定样式 如p:first-child{}--第一个P元素的样式
·last-child: 对一个父元素中的最后一个子元素指定样式 如 p:last-chidl{}--倒数第一个P元素的样式
2.对指定序号的子元素使用样式[2个]
·nth-child: 对指定序号的子元素设置样式(正数) 如p:nth-child(2){}--第2个P元素的样式
·nth-last-child:对指定序号的子元素设置样式(倒数) 如p:nth-last-child(2){}--倒数第2个P元素的样式
3.对所有第奇数个子元素或第偶数个子元素指定样式[4个]
·nth-child(odd): 所有正数下来第偶数个子元素
·nth-child(even):所有正数下来第奇数个子元素
·nth-last-child(odd): 所有倒数上去第偶数个子元素
·nth-last-child(even):所有倒数上去第奇数个子元素
-------------------------------------------------------------------------------------------------------------------
PartIII
nth-of-type:
nth-last-of-type:
-------------------------------------------------------------------------------------------------------------------
PartIV 循环使用样式
nth-child(n) 把参数n改成可循环的an+b的形式
a表示每次循环中共包括几张样式； b表示指定的样式在循环中所在的位置；
如下代码：
<style>
li:nth-child(4n+1){background-color:yellow;} //第一个li背景色为 黄色，这样依次循环下去
li:nth-child(4n+2){background-color:bule;} //第二个li背景色为 蓝色......
li:nth-child(4n+3){background-color:red;} //第三个li背景色为 红色......
li:nth-child(4n+4){background-color:green;} //第四个li背景色为 绿色......
//4n+4可缩写为4n
</style>
前面所讲的nth-child(odd)&nth-child(even)可以用如下代码替代：
nth-child(2n+1){样式} //所有正数下来的第奇数个子元素
nth-child(2n+2){样式} //..............第偶数........
nth-last-child(2n+1){样式} //所有倒数上去的第奇数个子元素
nth-last-child(2n+2){样式} //..............第偶数........
-------------------------------------------------------------------------------------------------------------------
PartV only-child选择器
only-child:当某个父元素中只有一个子元素时使用的样式
如下样式 代码1：(按照以前所学的)
<style>li：nth-child(1):nth-last-child(1){ background-color:yellow} </style>
方法1：可用only-child代替代码1
<style> li：only-child{ background-color:yellow} </style>
方法2：也可用only-of-type代替代码1
<style> li：only-of-type{ background-color:yellow} </style>
