CSS3结构伪类选择器

怡然一记 • 2023-01-07 • 前端开发, 学习笔记 • 181 阅读

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
THE END
分享
二维码
打赏
海报
CSS3结构伪类选择器
CSS3结构伪类选择器 在CSS3中新增了一个结构选择器的属性。使得我们可以更好的操作在一个父级盒子里的子元素。 结构伪类选择器的属性： 选择符 属性介绍 ……
<<上一篇
下一篇>>
文章目录
关闭
目 录