• css——伪类选择器


     

    <body>
        <div class="box">   
    <p>0</p>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <p>1</p>
        </div>
    </body>

    几个比较有用的伪类选择器:

    选中第一个目标元素:

    .box div:first-of-type{
                
            }#选中第一个div元素。无论div前面有多少个其他元素

    选中最后一个目标元素:

    .box div:last-of-type{
                
            }
    #选中最后一个div元素。无论div前面有多少个其他元素
    
    

    选中前几个目标元素:只需要将n改为负值,使用最后一个目标元素的位置加上   -n  就可以实现。

    例如我们要选中前两个div元素,最后一个div的位置是3,那么就是   

    .box div:nth-child(-n+3){
                font-size: 50px;
            }

     选择某个特定子元素其父类只有此子元素自身:

            div :only-child{# 选中的是div标签下只有一个子元素的此子元素
                font-size: 50px;
            }
          
        </style>
    </head>
    <body>
        <div>1
            <a href="">3</a>
        </div>
        <div>2
            <a href=""></a>
            <a href=""></a>
        </div>
        <div>
            <a href="">3</a>
            
        </div>
        <div>4
            <p>4</p>
        </div>
        <div>5</div>
    </body>

    如果要广泛选择只有一个子元素的标签的子元素,则将分号前面的标签名字去掉即可。


    选择器1:not(选择器2):选择选择器1除选择器2选择的元素之外的元素

  • 相关阅读:
    Ubuntu 制作run安装包 依赖mono开发的软件 半自动安装包
    Windows C# to Linux Mono
    Ubuntu 18.04 操作简记
    Ubuntu 安装 Qt 简记
    Visual Studio操作记录
    WinForm项目中使用Xaml资源字典
    加载大量控件
    executable file and DLL
    微信小程序IOS系统兼容 Date.parse() 时间字符串转时间戳
    谷歌浏览器禁用 页面js
  • 原文地址:https://www.cnblogs.com/baihuatian/p/12021030.html
Copyright © 2020-2023  润新知