首页 > 代码库 > H5 18-序选择器

H5 18-序选择器

2024-09-05 21:40:08   244人阅读

18-序选择器

<style>.para:only-of-type { color: red }</style>

 

我是段落1

我是段落2

我是段落2

我是标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-序选择器</title>
    <style>
        /*
        p:first-child{
            color: red;
        }
        */
        /*
        p:first-of-type{
            color: blue;
        }
        */
        /*
        p:last-child{
            color: red;
        }
        */
        /*
        p:last-of-type{
            color: blue;
        }
        */
        /*
        p:nth-child(3){
            color: red;
        }
        */
        /*
        p:nth-of-type(3){
            color: blue;
        }
        */
        /*
        p:nth-last-child(2){
            color: red;
        }
        */
        /*
        p:nth-last-of-type(2){
            color: red;
        }
        */
        /*
        p:only-child{
            color: purple;
        }
        */
        /*
        p:only-of-type {
            color: red;
        }
        */
        .para:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<!--
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type  选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
-->
<!--
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
-->
<p class="para">我是段落1</p>
<div>
    <p class="para">我是段落2</p>
    <p class="para">我是段落2</p>
    <h1>我是标题</h1>
</div>
</body>
</html>

 

H5 18-序选择器


联系
我们