• 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选择的元素之外的元素

  • 相关阅读:
    shell面试题整理
    用循环链表实现Josephus问题
    in与exists的区别
    单链表的建立/测长/打印/删除/排序/逆序/寻找中间值
    float在内存中的存放
    crontab定时任务详解
    螺旋队列问题之二
    螺旋队列问题之一
    android网络编程--从网络下载图片,并保存到内存卡
    android Shader类简介_渲染图像示例
  • 原文地址:https://www.cnblogs.com/baihuatian/p/12021030.html
Copyright © 2020-2023  润新知