zoukankan      html  css  js  c++  java
  • 2:属性选择器 + 结构伪类选择器 + 伪元素

     一  属性选择器

     使用要点

    属性选择器、标签选择器、伪类选择器权重都是10

    1)直接写属性 [ 最基本的使用 ]

    /*所有按钮改为小手*/
    button {
      cursor: pointer;
    }
    /*给添加禁用的按钮修改为默认小箭头*/
    选择的是:既是 button 又有 disabled 属性的元素
    button[disabled] {
      cursor: default;
    }
    <button>按钮1</button>
    <button>按钮2</button>
    <button disabled="disabled">按钮3</button>
    <button disabled="disabled">按钮4</button>

     2)属性等于值

    input[type="text"] {
      background: pink;
    }
    
    //选择出属性值是text的所以input
    <input type="text">
    <input type="text">
    <input type="password">
    <input type="password">

    3)属性值以某个值开头

    div {
         300px;
        height: 300px;
        border: 1px solid red;
    }
    /*所有类名为i开头的div被选中*/
    div[class^="i"] {
        background: pink;
    }
    
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>

    4)属性值以某个值结尾

    div {
         300px;
        height: 300px;
        border: 1px solid red;
    }
    /*所有类名为1结尾的div被选中*/
        div[class$="1"] {
        background: pink;
    }
    
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>

     5)属性值中包含某个值

    div {
         300px;
        height: 300px;
        border: 1px solid red;
    }
    /*所有类名为1结尾的div被选中*/
    div[class*="icon"] {
        background: pink;
    }
    
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>

     

     二 结构伪类选择器 child 和 of-type

     

    1)选择第一个

    div: first-child {}  选择第一个div

    2)选择最后一个

    div: last-chilc {} 选择最后一个

    3)选择第 N 个

    div: nth-child(N) {}
    
    N可以是数字、关键字、公式
    
    //1 N是数字:数字是几就代表选择第几个
    
    //2 N是关键字: even 偶数   odd 奇数
    
    //3 N是公式 公式计算从0开始

     

    偶数行 [ 2n ]

        n
    2 * 0 = 0
    2 * 1 = 2
    2 * 2 = 4
    2 * 3 = 6
    3 * 4 = 8
    选中了 2 4 6 8 10 偶数行 [ 0和不存在的会自动忽略 ]
    5n = 5 10 15 20

     奇数行 [ 2n + 1 ]

        n
    2 * 0 = 0+1 = 1
    2 * 1 = 2+1 = 3
    2 * 2 = 4+1 = 5
    2 * 3 = 6+1 = 7
    3 * 4 = 8+1 = 9
    选中了 1 3 5 7 9 11 奇数

     从某个值开始到最后 [ n + 5 ]

    n+5 = 0+5 = 5 从第五个开始 后面的全选中

     选择前5个 [ -n + 5 ]

    -n + 5 选中前5个
    -0 + 5 = 5
    -1 + 5 = 4
    -2 + 5 = 3
    -3 + 5 = 2
    -4 + 5 = 1
    -5 + 5 = 0

     nth-child() 只按照顺序选 它不管孩子类型是否一致 [ 重点 ] 

     

    三  选择指定类型的元素 [ of-type ]

    选择第一个

    div span:first-of-type {} 选择div下span元素的第一个  其他元素忽略掉

    最后一个

    div span:last-of-type {} 选择div下span元素的最后一个 其他元素忽略

    第 N 个 

    div span: nth-of-type(2) 选择div下span元素的第二个 其他元素忽略

    N的使用方法和 child 一样的

    案例

    <style>
            /*选中了p元素*/
            div :first-child {
                background: pink;
            }
            /*选中了第一个span*/
            div span:first-of-type {
                background: #666666;
            }
    </style>
    
    <div>
        <p>p1</p>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <div>DFDF </div>
    </div>
    执行结果 

    三  伪元素选择器

    //1 伪元素是两个冒号   伪类是一个冒号
    
    //2 伪元素主要的两个  before 和 after

    //3 在元素 内容的前面 或 后面 插入内容

    使用注意点

    //1 bafore 和 after 必须有 content属性
    
    //2 before在内容之前 after在内容之后
    
    //3 before 和 after 都创建了一个行内元素 [元素就是盒子 可以设置大小]
    
    //4 在dom中看不到创建的元素 所有称为 伪元素
    
    //5 伪元素和标签选择器一样 权重是1
    <style>
            div {
                 150px;
                height: 100px;
                border: sienna solid 1px;
            }
            div::before,
            div::after {
                display: inline-block;
                 60px;
                height: 60px;
                background: pink;
                text-align: center;
                content: "";
            }
            div::after {
                content: "";
            }
    </style>
    <div>我</div>
     执行结果 
  • 相关阅读:
    【crontab】误删crontab及其恢复
    New Concept English there (7)
    New Concept English there (6)
    New Concept English there (5)
    New Concept English there (4)
    New Concept English there (3)
    New Concept English there (2)Typing speed exercise
    New Concept English there (1)Typing speed exercise
    New Concept English Two 34 game over
    New Concept English Two 33 94
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14353607.html
Copyright © 2011-2022 走看看