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>
  • 相关阅读:
    SQL UNION 和 UNION ALL 操作符
    JavaScript--验证码随机生成
    C#基础 out和ref
    远程连接身份验证错误,又找不到加密Oracle修正
    ASP.Net WebAPI -- 简单实现增删改查
    SpringBoot发送邮箱验证码
    VMware虚拟机安装Linux系统详细教程
    SpringBoot实现登陆拦截
    JavaScript 实例、构造函数、原型对象关系图
    JavaScript创建对象的几种方式总结
  • 原文地址:https://www.cnblogs.com/ljcgood66/p/6440386.html
Copyright © 2011-2022 走看看