zoukankan      html  css  js  c++  java
  • 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选择的元素之外的元素

  • 相关阅读:
    Nodejs-原型链污染
    dpwwn-02靶机渗透
    dpwwn-01靶机渗透
    Bulldog1靶机渗透
    php+html实现用户登录退出
    DC4靶机
    vulnhub-Os-hackNos-3
    Linux系统解析XML中文乱问题
    idea添加database
    PL/SQL学习笔记
  • 原文地址:https://www.cnblogs.com/baihuatian/p/12021030.html
Copyright © 2011-2022 走看看