CSS3结构伪类选择器
CSS3结构伪类选择器
在CSS3
中新增了一个结构选择器的属性。使得我们可以更好的操作在一个父级盒子里的子元素。
结构伪类选择器的属性:
选择符 | 属性介绍 |
---|---|
A:first-child | 选择父元素中的第一个子元素 |
A:last-child | 选择父元素中的最后一个子元素 |
A:nth-child(n) | 选择父元素中的第n个子元素 |
A:first-of-type | 选择指定类型元素A的第一个元素 |
A:last-of-type | 选择指定类型元素A的最后一个元素 |
A:nth-of-type | 选择指定类型元素A的最后一个元素 |
A:first-child
<head>
<style>
ul li:first-child {
background-color:#ccc;
}
/*此时选择器就会选择ul里面的第一个li设置背景色为#ccc*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
A:last-child
<head>
<style>
ul li:last-child {
background-color:#ccc;
}
/*此时选择器就会选择ul里面的最后一个li设置背景色为#ccc*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
A:nth-child(n)
<head>
<style>
ul li:nth-child(3) {
background-color:#ccc;
}
/*此时选择器就会选择ul里面的第三个li设置背景色为#ccc*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
但是我们在实际使用中可能会遇到不同类型的元素在父级元素中,我们就可以使用first-of-type
对相应的类型元素进行设置,或者不指定元素类型直接对其父元素进行选择子元素。
不指定子元素
<head>
<style>
div :nth-child(3) {
background-color:#ccc;
}
/*此时选择器就选择div盒子中的第三个子元素设置背景色为#ccc*/
</style>
</head>
<body>
<div>
<p>p元素1</p>
<p>p元素2</p>
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
</div>
</body>
A:first-of-type
<head>
<style>
div span:first-of-type {
background-color:#ccc;
}
/*此时选择器会对div盒子中的第一个span类型的子元素设置背景色为#ccc*/
</style>
</head>
<body>
<p>p元素1</p>
<p>p元素2</p>
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
</body>
A:last-of-type
<head>
<style>
div span:last-of-type {
background-color:#ccc;
}
/*此时选择器会对div盒子中的最后一个span类型的子元素设置背景色为#ccc*/
</style>
</head>
<body>
<p>p元素1</p>
<p>p元素2</p>
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
</body>
A:nth-of-type(n)
<head>
<style>
div span:nth-of-type(2) {
background-color:#ccc;
}
/*此时选择器会对div盒子中的第二个span类型的子元素设置背景色为#ccc,而不是div中的第二个子元素*/
</style>
</head>
<body>
<p>p元素1</p>
<p>p元素2</p>
<span>span元素1</span>
<span>span元素2</span>
<span>span元素3</span>
</body>
其他属性值
关键字
不仅是可以对某一个进行选择,而且可以通过关键字,对符合关键字的进行选择:
even:奇数
add:偶数
<head>
<style>
ul li:nth-child(even) {
background-color:#ccc;
}
/*此时选择器就会选择ul里面为奇数的li设置背景色为#ccc,选择偶数则设置值为add*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
公式
<head>
<style>
ul li:nth-child(2n+1) {
background-color:#ccc;
}
/*此时选择器就会选择ul里面位置是2n+1的li设置背景色为#ccc,其中li的位置是从0开始的,所以2n+1等同于奇数,2n等同于偶数,包括其他倍数如5n、5n+1*/
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
我们也可以通过设置值为n+2,则从第二个开始到最后一个(包括第二个),反之-n+2则是从第二个开始到第一个
CSS3结构伪类选择器
https://xsunhua.cn/732.html



共有 0 条评论