zoukankan      html  css  js  c++  java
  • H5 18-序选择器

    18-序选择器

    我是段落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>
  • 相关阅读:
    kafka消费者问题
    kubernetes
    Grafana+prometheus+AlertManager+钉钉机器人
    kafka汇总
    java实现顺序表、链表、栈 (x)->{持续更新}
    hadoop细节 -> 持续更新
    drf之组件(认证、权限、排序、过滤、分页等)和xadmin、coreapi
    drf之视图类与路由
    drf序列化与反序列化
    drf之接口规范
  • 原文地址:https://www.cnblogs.com/ljcgood66/p/6440386.html
Copyright © 2011-2022 走看看