CSS3学习笔记1：结构性伪类选择器

最新推荐文章于 2023-01-04 10:45:00 发布

转载最新推荐文章于 2023-01-04 10:45:00 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ccqqccqqqq/archive/2012/02/23/2364552.html

本文详细介绍了CSS中结构性伪类选择器的使用方法，包括root、not、empty等基本选择器，以及first-child、nth-child等复杂选择器的应用技巧。

第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：(按照以前所学的)

方法1：可用only-child代替代码1

方法2：也可用only-of-type代替代码1

转载于:https://www.cnblogs.com/ccqqccqqqq/archive/2012/02/23/2364552.html