css3新增选择器

css3新增选择器

属性选择器

根据元素特定的属性选择元素，不借助与类或id

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结束的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

        /*1.必须是input元素同时具有value属性*/
        input[value] {
            color: aqua;
        }

        /*2.只选择type中属性=属性值*/
        input[type=password] {
            color: aqua;
        }

        /*3.选择div中具有class属性，且属性值以icon开头的元素*/
        div[class^=icon] {
            color: red;
        }

    <!--1.利用属性选择器可以不用借助类或id选择器-->
    <input type="text" value="请输入用户名">
    <input type="text">
    <!--2.选择属性=值的某些元素(重点)-->
    <input type="text">
    <input type="password">
    <!--3.选择属性值开头相同的某些元素-->
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div>路过......</div>
    <!--4.选择属性值结尾相同的某些元素-->
    <!--5.选择属性值中含有这些内容的某些元素-->

注意：权重和类、伪类一样，都是10

div[class=icon]中div权重为1，[class=icon]权重为10，共11

结构伪类选择器

主要根据文档结构来选择元素，常用于根据父级选择里的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

ul li:first-child{
	color:pink;
}

E:nth-child(n)

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始
• n可以是关键字：even偶数，odd奇数
• n可以是公式：常见公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的那个数会被忽略）
• nth-child(n)权重为10

        /*1.把所有的偶数even的孩子选出来*/
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /*2.把所有的奇数odd的孩子选出*/
        ul li:nth-child(odd) {
            background-color: gray;
        }

        /*3.nth-child(n) n从0开始 每次加1 这里字母必须是n，不能是其他字母*/
        ol li:nth-child(2n) {
            background-color: pink;
        }

E:nth-child(n)和E:nth-of-type(n)的区别

nth-child(n)

会把所有的盒子都排列序号，无论标签是否符合

执行时会先找到child(n)，再判断是否符合前面的E

section div:nth-child(1){
		background-color:red;
}

<section>
	<p>first</p>
    <div>second</div>
    <div>third</div>
</section>

先将所有盒子排序，先找到第一个盒子p，回去判断不是div，所以不添加任何效果

nth-of-type(n)

会先看标签，再给标签排序，如果套用上一套代码的话，secend背景会变色

伪元素选择器

利用css创建标签元素，不需要html，简化html结构

选择符	简洁
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• before和after创建一个元素，但是属于行内元素（无大小，除非转换）
• 新创建的这个元素在文档树中找不到，故称为伪元素
• before和after必须有content=’ '属性（写内容）
• before在父元素前面创建元素，after在父元素后面（是内容的前后，不是层级关系）
• 伪元素选择器和标签选择器一样，权重为1
• 伪元素选择器清除浮动

    .clearfix:after {
        /*伪元素必写*/
        content: "";
        /*伪元素是行内，转为块级*/
        display: block;
        /*不要看见这个元素*/
        height: 0;
        clear: both;
        /*不要看见这个元素*/
        visibility: hidden;
    }

    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }
/*所以其实还是与隔墙法相同*/

• 双元素去除浮动

	.clearfix:before,.clearfix:after {
        content: "";
   /*为了让前后两堵墙在同一行，使用table*/
        display: table;
	}
	.clearfix:after{
	    clear:both;
	}	
	.clearfix{
	    *zoom:1;
	}

demo（伪元素选择器）

        @font-face {
            font-family: "iconfont";
            /* Project id 2682488 */
            src: url('iconfont/iconfont.woff2?t=1626585468562') format('woff2'),
                url('iconfont/iconfont.woff?t=1626585468562') format('woff'),
                url('iconfont/iconfont.ttf?t=1626585468562') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }


        .icon-sousuo1:before {
            content: "\e600";
        }

        /********************************************/
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;

        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: "iconfont";
            content: '\e600';
            color: red;
        }

    <div></div>

只用一个div就添加了一个有图标的样式

之前的土豆网遮罩案例也可以使用伪元素选择器简化标签

        .tudou::before {
            content: '';
            /*隐藏遮罩层*/
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(131, 36, 36, 0.4) url(images/shouhu.png) no-repeat center;
        }


        /*鼠标经过盒子，让里面的::before显示出来*/
        .tudou:hover::before {
            display: block;
        }

    <div class="tudou">
        <img src="images/tb.jpg" alt="">
    </div>

html不需要添加遮罩层标签即可直接打到效果