653 字

3 分钟

css选择器

css选择器本质就是css与html两种语法建立关联的特定标识符：

就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们

而表示标签名字的方式有多种，每一种名字在css语法中都对应这一种特定标识符，下面我们就来详细介绍：

1、基础选择器

1-1 通配选择器

/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */
/* 通配选择器控制页面中所有的标签(不建议使用) */
* {
    /* 样式块 */
}

<!-- 页面中所有标签都能被匹配 -->
<html></html>
<body></body>
<div></div>
<p></p>
<i></i>

1-2 标签选择器

/* 特定标识符 标签名 */
/* 标签选择器控制页面中标签名为标签选择器名的所有标签*/
div { /* 控制页面中所有div标签的样式 */
    /* 样式块 */
}

<!-- 页面中所有的div标签都能被匹配 -->
<div></div>
<div class="sup">
    <div id='inner'></div>
</div>

1-3 class选择器（提倡使用）

/* 特定标识符 点(.) */
/* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/
.box { /* 控制页面中所有标签全局属性class值为box标签的样式 */
    /* 样式块 */
}

<!-- 页面中class属性值为box的标签都能被匹配 -->
<div class="box"></div>
<p class="box">
    <i class="box"></i>
</p>

1-4 id选择器

/* 特定标识符 井号(#) */
/* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/
#box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */
    /* 样式块 */
}

<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 -->
<div id="box"></div>

1-5 基础选择器优先级

在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：

<head>
    <style>
        * {
            width: 50px;
            height: 50px;
            background-color: red;
            color: pink;
        }
        div {
            width: 60px;
            height: 60px;
            background-color: orange;
        }
        .box {
            width: 70px;
            height: 70px;
        }
        #ele {
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="box" id="ele">文字内容</div>
</body>
<!--
1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次
4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
优先级：通配选择器 < 标签选择器 < class选择器 < id选择器
-->

2、复杂选择器

2-1 群组选择器

/* 连接标识符 逗号(,) */
/* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */
div, p, .box, #ele {
    /* 样式块 */
}

<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 -->
<div>
    <div></div>
</div>
<p></p>
<p></p>
<i class="box"></i>
<span class="box"></span>
<b id="ele"></b>

2-2 后代选择器

/* 连接标识符 空格( ) */
/* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}

<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->

2-3 子代选择器

/* 连接标识符 大于号(>) */
/* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/
    /* 样式块 */
}

<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 -->
<body>
    <div class='box'>
        <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 -->
    </div>
    <div>
        <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 -->
    </div>
    <div class='box'>
        <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 -->
    </div>
</body>
<!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->

2-4 兄弟选择器

/* 连接标识符 波浪号(~) */
/* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}

<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->

2-5 相邻选择器

/* 连接标识符 加号(+) */
/* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */
#ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/
    /* 样式块 */
}

<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 -->
<h3 id="ele"></h3>
<div></div><!-- #ele与div是直接兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，能被匹配 -->
<div></div><!-- #ele与div是间距兄弟关系 -->
<i></i><!-- div与i是直接兄弟关系，不能被匹配 -->
<!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->

2-6 交叉选择器

/* 连接标识符 紧挨着(没有任何连接符) */
/* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */
div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
    /* 样式块 */
}

<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
<!-- class属性拥有多个值时，多个值之间用空格隔开 -->
<div class="box tag" id="ele"></div>

2=7 基础选择器优先级

简单选择器存在优先级，优先级的前提就是不同选择器同时控制同一标签的同一属性，那么在复杂选择器下，一定会出现这种同时控制同一标签的同一属性情况，那复杂选择器的优先级又是如何来规定的呢？

1. 复杂选择器的种类并不会影响优先级
    -- 后代：div #ele  |  兄弟：div~#ele  |  交叉：div#ele  优先级一样
2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
    -- 三层标签选择器后代：body div i  大于  两层标签选择器后代：div i  |  body i
3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
    -- id选择器：#i 大于 n层class选择器：.box .i
    -- class选择器：.box 大于 n层标签选择器：body div

3、总结

选择器是一个庞大的家族，还有很多css选择器等待大家自己去挖掘，掌握已上选择器也已足够帮助我们完成简单前端开发了

我们有了css与html建立联系的选择器基础，那么建立联系后，css语言除了控制标签的宽高背景颜色字体颜色外，还有哪些丰富的样式控制呢？下面我们就一起来学习一下具体的样式设置。