• css3选择器


    ":first-child" 选择父元素下的第一个子元素。列: ol > li :first-child{color:red;}  ol元素中的第一个li元素内容设为红色;

    ":last-child" 选择父元素的最后一个子元素。列: ul > li :last-child{background:blue;}  ul列表中的最后一个li元素背景设为蓝色;

    ":nth-child(n)" 定位父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)。

    ":nth-last-child(n)" 从父元素的最后一个子元素开始计算,来选择特定的元素。

    ":first-of-type" 定位父元素下某个类型的第一个子元素。 列: .wrapper > p:first-of-type {background:orange;} 将容器“div.wrapper”中的第一个p元素背景设置为橙色。

    ":nth-of-type(n)" 定位父元素中某个特定类型的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)。

    ":last-of-type" 选择父元素下的某个特定类型的最后一个子元素。

    ":nth-last-of-type(n)" 从最后一个子元素开始,选择父元素中指定的某种子元素类型。

    ":only-child" 选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

    "only-od-type" 是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

    "::before"和"::after" 这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。

    列: 

    .effect::before, .effect::after{
        content:"";
        position:absolute;
        z-index:-1;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
        box-shadow:0 0 20px rgba(0,0,0,0.8);
        top:50%;
        bottom:0;
        left:10px;
        right:10px;
        -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
    }
    上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。
  • 相关阅读:
    使用DragonFly进行智能镜像分发
    Operator部署Prometheus
    kubernetes中部署Jenkins并简单使用
    kubernetes常用控制器之DaemonSet
    kubernetes中部署nacos
    selenium自动化操作
    BeautifulSoup爬取网页分页
    细品BeautifulSoup节点访问
    再端一碗BeautifulSoup
    初试爬虫
  • 原文地址:https://www.cnblogs.com/ncloud/p/7324071.html
Copyright © 2020-2023  润新知