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