• 24 CSS3新增选择器


    CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
    1.属性选择器
    2.结构伪类选择器
    3.伪元素选择器

    1.属性选择器

    属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

     注意:类选择器、属性选择器、伪类选择器,权重为 10。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS3新增属性选择器</title>
        <style>
            /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
            /* input[value] {
                color:pink;
            } */
            /* 只选择 type =text 文本框的input 选取出来 */
            input[type=text] {
                color: pink;
            }
            /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
            div[class^=icon] {
                color: red;
            }
            section[class$=data] {
                color: blue;
            }
            div.icon1 {
                color: skyblue;
            }
            /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
        </style>
    </head>
    <body>
        <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
        <!-- <input type="text" value="请输入用户名">
        <input type="text"> -->
        <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
        <input type="text" name="" id="">
        <input type="password" name="" id="">
        <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
        <div>我是打酱油的</div>
        <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
        <section class="icon1-data">我是安其拉</section>
        <section class="icon2-data">我是哥斯拉</section>
        <section class="icon3-ico">哪我是谁</section>
    
    </body>
    </html>

    2. 结构伪类选择器

    结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素

     注意:类选择器、属性选择器、伪类选择器,权重为 10。

    nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
    n 可以是数字,关键字和公式
    n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…
    n 可以是关键字:even 偶数,odd 奇数
    n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )

     

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS3新增结构伪类选择器-nth-child</title>
        <style>
            /* 1.把所有的偶数 even的孩子选出来 */
            ul li:nth-child(even) {
                background-color: #ccc;
            }
    
            /* 2.把所有的奇数 odd的孩子选出来 */
            ul li:nth-child(odd) {
                background-color: gray;
            }
            /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
            /* ol li:nth-child(n) {
                background-color: pink;
            } */
            /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
            /* ol li:nth-child(2n) {
                background-color: pink;
            }
            ol li:nth-child(2n+1) {
                background-color: skyblue;
            } */
            /* ol li:nth-child(n+3) {
                background-color: pink;
            } */
            ol li:nth-child(-n+3) {
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ul>
        <ol>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ol>
    </body>
    
    </html>

    区别:
    1.nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
    2.nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS3新增选择器nth-type-of</title>
        <style>
            ul li:first-of-type {
                background-color: pink;
            }
            ul li:last-of-type {
                background-color: pink;
            }
            ul li:nth-of-type(even) {
                background-color: skyblue;
            }
            /* nth-child 会把所有的盒子都排列序号 */
            /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */
    
            section div:nth-child(1) {
                background-color: red;
            }
             /* nth-of-type 会把指定元素的盒子排列序号 */
            /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
            section div:nth-of-type(1) {
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ul>
        <!-- 区别 -->
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
    </body>
    
    </html>

    小结
    结构伪类选择器一般用于选择父级里面的第几个孩子
    nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
    nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
    关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式
    如果是无序列表,我们肯定用 nth-child 更多
    类选择器、属性选择器、伪类选择器,权重为 10。

    3. 伪元素选择器(重点)

    伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

    注意
    before 和 after 创建一个元素,但是属于行内元素
    新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
    语法: element::before {}
    before 和 after 必须有 content 属性
    before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
    伪元素选择器和标签选择器一样,权重为 1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>伪元素选择器before和after</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            /* div::before 权重是2 */
            div::before {
                /* 这个content是必须要写的 */
                /* display: inline-block; */
                content: '我';
                /*  30px;
                height: 40px;
                background-color: purple; */
            }
            div::after {
                content: '小猪佩奇';
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    使用样例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
        <style>
            .tudou {
                position: relative;
                width: 444px;
                height: 320px;
                background-color: pink;
                margin: 30px auto;
            }
    
            .tudou img {
                width: 100%;
                height: 100%;
            }
    
            .tudou::before {
                content: '';
                /* 隐藏遮罩层 */
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
            }
    
            /* 当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来 */
            .tudou:hover::before {
                /* 而是显示元素 */
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="tudou">
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <img src="images/tudou.jpg" alt="">
        </div>
    </body>
    
    </html>
  • 相关阅读:
    守护进程-锁-队列(生产者消费者模型)
    正则表达式不包含某个字符串写法
    正则表达式匹配不包含某些字符串的技巧
    08.参数估计_点估计
    07.编程理解中心极限定理
    05.编程理解小数和大数定律
    03.描述性统计代码
    02.描述统计 (descriptive statistics)
    oracle之三手工不完全恢复
    oracle之三手工完全恢复
  • 原文地址:https://www.cnblogs.com/GHNSL/p/13835508.html
Copyright © 2020-2023  润新知