zoukankan      html  css  js  c++  java
  • 前端(三)—— 基础选择器、组合选择器、属性选择器

    基础选择器、组合选择器、属性选择器

    一、基础选择器

    1、通配选择器

    * {
        border: solid;
    }
    /*匹配文档中所有标签:通常指html、body及body中所有显示类的标签*/

    2、标签选择器

    div {
        background-color: yellow;
    }
    /*匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span*/

    3、类选择器

    .red {
        color: red;
    }
    /*匹配文档中所有拥有class属性且属性值为red的标签:如<sup class="red"></sup> <sub class="red"></sub>均会被匹配*/

    4、id选择器

    #div {
        text-align: center;
    }
    /*匹配文档中所有拥有id属性且属性值为div的标签:如<div id="div"></div> <section id="div"></section>均会被匹配*/

    5、基础选择器的优先级

    id选择器 > 类选择器 > 标签选择器 > 通配选择器

    6、基础选择器总结

    1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
             * {
                margin: 0;
            }
    2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
    3.类选择器为布局首选(建议基本全用class选择器进行布局)
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css选择器</title>
        <style type="text/css">
            /*基础选择器*/
            /*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/
            /** {
                border: solid;
            }*/
    
            /*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/
            div {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            section {
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
            /*3.类选择器(.):匹配指定类名对应的所有标签*/
            .dd {
                font-size: 50px;
            }
    
            /*4.id选择器(#):匹配指定id名对应的唯一标签*/
            /*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个*/
            #ele {
                color: blue;
            }
        
        </style>
    </head>
    <body>
        <div class="dd">d_1</div>
        <section>s_1</section>
        <div class="d" id="ele">d_2</div>
        <section class="dd">s_2</section>
        <span></span>
    </body>
    </html>
    基础选择器

    二、组合选择器

    1、群组选择器

    • 一次性控制多个选择器

    • 选择器之间以 , 隔开,每一个选择器位均可以为任意合法选择器或选择器组合

    div, span, .red, #div {
        color: red;
    }

    2、子代 / 后代选择器

    • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器

    • 每一个选择器位均可以为任意合法选择器或选择器组合

    • 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级或多级父子嵌套关系

    /*子代选择器用 > 连接*/
    body > div {
        color: red;
    }
    
    /*后代选择器用 空格 连接*/
    .sup .sub {
        color: red;
    }

    3、相邻 / 兄弟选择器

    • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器

    • 每一个选择器位均可以为任意合法选择器或选择器组合

    • 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

    /*相邻选择器用+连接*/
    .d1 + .d2 {
        color: red;
    }
    
    /*兄弟选择器用~连接*/
    .d1 ~ .d3 {
        color: red;
    }

    4、交集选择器

    /*<i>i</i>*/
    /*<i class="s">iiii</i>*/
    i.s {
        color: red;
    }

    5、组合选择器优先级

    (1)同目录结构

    • 子代和后代选择器相同
    • 相邻和兄弟选择器相同
    • 终样式采用逻辑后的样式值

    (2)不同目录下结构

     

    1. 根据选择器权值进行比较
    2. 权值为标签权重之和
    3. 权重:参考下表
    4. 权值比较时,关心的是值大小,不关心位置与具体选择器名
    5. id永远比class大,class永远比标签大

      注:控制的是同一目标,才具有可比性

    选择器权重
    通配 1
    标签 10
    类、属性 100
    id 1000
    !important 10000

    三、属性选择器

    注:属性选择器的权重和类选择器相同

    • [attr]:匹配拥有attr属性的标签

    • [attr = val]:匹配拥有attr属性,属性值为val的标签

    • [attr ^= val]:匹配拥有attr属性,属性值以val开头的标签

    • [attr $= val]:匹配拥有attr属性,属性值以val结尾的标签

    • [attr *= val]:匹配拥有attr属性,属性值包含val的标签

    <style>
            /*属性选择器权重 == class选择器权重*/
            /*有属性class的所有标签*/
            [class] {
                color: orange;
            }
    
            /*有属性class且值为d2的所有标签(值不影响权重)*/
            [class="d2"] {
                color: pink;
            }
            
            /*是div且class='d2',增加了权重*/
            div[class='d2'] {
                color: blue;
            }
            
            /*属性以什么开头: ^= */
            /*属性以什么结尾: $= */
            /*属性模糊匹配: *= */
            [class ^= 'he'] {
                color: yellow;
            }
            [class $= 'ld'] {
                color: tan;
            }
            [class *= 'ow'] {
                color: cyan;
            }
            [class][dd] {
                color: brown;
            }
    
        </style>
    属性选择器
  • 相关阅读:
    Python 冒泡排序
    编程规范之注释篇
    编程规范之变量命名篇
    安装Django
    字典&列表的拓展理解
    小球落地
    Python结合sql登陆案例
    面向对象:两手交换牌
    每日一题(一)
    Web应用之LAMP源码环境部署
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9687219.html
Copyright © 2011-2022 走看看