一、结构伪类 - :nth-of-type()
:nth-of-type()
的用法与 :nth-child()
用法类似,不同的是 :nth-of-type()
在计数时只计算同种类型的元素。
创建 HTML 页面,首先使用 :nth-child()
来选择元素,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*需求:选择 box 中的第三个 div 元素*/
.box > div:nth-child(3) {
color: red;
}
</style>
</head>
<body>
<div class="box">
<div>我是div1</div>
<p>我是p</p>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
<div>我是div6</div>
<div>我是div7</div>
<div>我是div8</div>
<div>我是div9</div>
<div>我是div10</div>
</div>
</body>
</html>
在浏览器中打开页面,具体效果如下:
可以看到并没有选中我们想要的元素,那么如果我们使用 :nth-of-type()
这个结构伪类来选择第三个元素会不会选中?
在 HTML 中增加如下 CSS 代码:
/*使用 nth-of-type:计数时只会统计同类元素*/
/*而 nth-child:计数时会统计所有类型元素*/
.box > div:nth-of-type(3) {
color: red;
}
刷新页面,效果如下:
可以看到使用 :nth-of-type()
结构伪类是可以实现我们的需求的。
除此之外还有 :nth-last-of-type()
用法与 :nth-of-type()
用法类似,不同点是 :nth-last-of-type()
从最后一个相同的元素开始往前计数。
二、其他常见的结构伪类
除了前面提到的四个需要传递参数的结构伪类外,还有以下几个常用的结构伪类,这些结构伪类是不需要传递参数的,具体有:
:first-child
:是父元素中的第一个元素,等同于:nth-child(1)
:last-child
:是父元素中最后一个元素,等同于:nth-last-child(1)
:first-of-type
:是父元素中第一个相同类型的元素,等同于:nth-of-type(1)
:last-of-type
:是父元素中最后一个相同类型的元素,等同于:nth-last-of-type(1)
:only-child
:是父元素中唯一的子元素:only-of-type
:是父元素中唯一的这种类型的子元素
创建 HTML 页面,使用这些结构伪类,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box > div:first-child {
color: red;
}
</style>
</head>
<body>
<div class="box">
<span>我是span</span>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
</div>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下:
这里并没有选中第一个元素,因为第一个元素是 span 元素,而选择器中限定了只能是 div 元素,我们可以稍微修改一下选择器,把 div 的限制去掉:
.box :first-child {
color: red;
}
刷新页面,具体效果如下:
可以看到这就选中了第一个元素。
创建 HTML 页面,在该页面中使用 :only-child
结构伪类,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box :first-child {
color: red;
}
.box > :only-child {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">
<span>我是span</span>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
</div>
<div class="box">
<div>box中唯一的div</div>
</div>
<div class="box">
<div>box中的div</div>
<div>box中的div</div>
</div>
</body>
</html>
在浏览器中工打开页面,效果如下:
可以看到 :only-child
伪类选中了父元素中唯一的一个子元素,我们来修改一下 HTML 结构,修改父元素中有多个子元素,不再唯一:
<div class="box">
<div>box中的唯一的div</div>
<span>box中唯一的span</span>
</div>
刷新页面,效果如下:
可以看到,当父元素中有多个子元素时,:only-child
便无法选中,但是如果元素类型是唯一的,我们可以使用 only-of-type
来选中唯一类型的元素:
.box > :only-of-type {
color: antiquewhite;
}
刷新页面,效果如下:
还有其他一些结构伪类偶尔使用:
:root
:根元素,就是指 HTML 元素:empty
:表示里面完全是空白的元素
在上述的页面中使用这两个结构伪类,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box :first-child {
color: red;
}
.box > :only-child {
font-size: 20px;
font-weight: 700;
}
.box > :only-of-type {
color: antiquewhite;
}
:root {
font-size: 30px;
}
:empty {
width: 100px;
height: 100px;
background-color: #f0f;
}
</style>
</head>
<body>
<div class="box">
<span>我是span</span>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
</div>
<div class="box">
<div>box中的唯一的div</div>
<span>box中唯一的span</span>
</div>
<div class="box">
<div>box中的div</div>
<div>box中的div</div>
</div>
<div class="container"></div>
</body>
</html>
刷新页面,效果如下:
三、否定伪类
not()
表示否定选择器,即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作,而唯独:not()
操作相反,它表示过滤操作,与JQuery中的:not
选择器用法相同。
否定选择器:not()可以帮助用户定位不匹配该选择器的元素,实现匹配操作后的二次过滤。
:not()
的格式是 :not(x)
。
x 是一个简单选择器,包括了元素选择器、通用选择器、属性选择器、类选择器、id 选择器 和伪类(除了否定伪类)。
创建 HTML 页面,使用否定选择器,具体 HTML 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*除了 .info 外,其他的全部设置大括号中的属性*/
.box :not(.info) {
color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<div class="item">我是div1</div>
<div class="info">我是info</div>
<div class="item">我是div2</div>
<div class="item">我是div3</div>
<div class="item">我是div4</div>
<div class="item">我是div5</div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下: