H5 18-序选择器

Posted 2020-09-01 甘林梦的开发之路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 18-序选择器相关的知识，希望对你有一定的参考价值。

18-序选择器

我是段落1

我是段落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-序选择器的主要内容，如果未能解决你的问题，请参考以下文章

如何从片段中调用 getSupportFragmentManager()？

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器

Android - 片段中的联系人选择器

日期选择器对话框在片段中不起作用[关闭]

在标签片段android中添加谷歌地点选择器