选择器

分类

类选择器

⇒ class:类名多个标签可以设置一个类名，在css设置时可以统一样式

⇒ 如果class=”tab” ,css设置时应为 .tab{…}。注意前面要加.

⇒ 类名可以有多个，类与类之间可以合并。在项目中，会出现多个标签共同具有一个属性的现象，所以我们可以将该属性封装成一个类，在所需的标签中加上该类名。示例1：两个div都具有的特性为：宽为200px,高为100px,且box1的颜色为蓝色，box2的颜色为红色。

.box{
    width:200px;
    height:100px;
}
.box1{
    background-color:blue;
}
.box2{
    background-color:red;
}
<div class="box box1"></div>
<div class="box box2"></div>

示例2：一些父级元素常常要清除浮动，所以常用的方法是封装一个叫做clearfix的类，给需要清除浮动的父元素添加该类名即可

    .clearfix{ 
    content:"";
    display:block; 
    clear:both; 
    }
    <div class="box clearfix"></div>

id选择器

⇒ 每个标签的id都是独一无二的，这要与类选择器区分开

⇒ 如果id = “tab” ,css设置时的格式为为 #tab{..}

标签选择器

⇒ 选择的是标签名

⇒ 如果想要所有的h1的粗度都为正常粗度，便可以设置 h1{…}

通配符选择器

⇒ 应用于所有标签

⇒ 格式为：*{…}

⇒ 通常是在最开始去掉所有标签的默认margin和padding

属性选择器

⇒ 针对标签的属性进行选择

⇒ [id = “box”]{…} 选择id=‘box’这一属性的标签

[href]{…} 选择带href属性的标签

⇒ 应用场所：有两个表单input ，如果希望第一个表单长一点，第二个表单短一点。可以用属性选择器

<input type="text"></input>
<input type="password"></input>

派生选择器（父子选择器）

⇒ div em{…} 是选择div下面的em标签

div .text1{…} 是选择div下面class为text1的标签

.content em{…} 是选择class为content下面的em标签

.context .text1 {…}是选择class为context下面class为text1的标签

⇒ 注意父子之间不是. 而是空格

⇒ 虽然叫父子选择器，但关系是祖辈也可以

⇒ 父子选择器的寻找时匹配的顺序是从右到左（对应HTML Tree是子结点到根节点）

知道了选择器的分类，最重要的就是记住各类选择器的权重。

选择器权重

选择器名称	相对权重
* （通配符）	0
标签、伪元素	1
类选择器（class）、伪类、属性	10
id	100
内联样式	1000
！important	正无穷

为了巩固今天的知识，附上一道笔试题，快来练练手吧~

下列选项中CSS权重顺序正确的是

A. !important>类选择器>ID选择器>行内样式>元素选择器

B. !important>行内样式>元素选择器 >伪类选择器>ID选择器

C. !important>行内样式>ID选择器 >属性选择器> 元素选择器

D. !important>行内样式>ID选择器>元素选择器 >属性选择器

正确答案是C，你做对了吗💗

一篇文章，让你彻底捋顺css选择器和权重！

选择器

分类