前端（三）—— 基础选择器、组合选择器、属性选择器

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

一、基础选择器

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）不同目录下结构

根据选择器权值进行比较
权值为标签权重之和
权重：参考下表
权值比较时，关心的是值大小，不关心位置与具体选择器名
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>

属性选择器