css选择器及权重

css选择器及权重

一、元素选择符（elment选择器）

语法： 元素名称{ 属性: 属性值; }

• 元素选择符就是文档语言对象类型作为选择符，即使用结构中元素作为选择符。例如body、div、p等
• 所有的页面元素都可以作为选择符

div {
	width: 200px;
	height: 200px;
}

二、id选择器

语法： #id名{ 属性: 属性值; }

• 起id名时要取英文名，不能用关键字（所有的标记和属性都是关键字，如head标记）
• 一个id名称只能对应文档中一个具体的元素对戏那个，因为id只能定义页面中的一个唯一的元素对象

#box {
	width: 200px;
	height: 200px;
}

<div id="box"></div>

三、class选择器

语法： .class名{ 属性: 属性值; }

• class选择符更适合定义一类样式

.box {
	width: 200px;
	height: 200px;
}

<div class="box"></div>

四、*通配符

语法： *{ 属性: 属性值; }

• 通配选择符的写法是“*”，其含义就是所有元素
• 常用来重置样式

* {
  font-size: 18px;
}

五、群组选择器

语法： 选择符1,选择符2,选择符3 { 属性: 属性值; }

• 当有多个选择符应用相同的样式时，可以将选择符用“,”分隔的方式，合并为一组

以下表示class选择器命名为box的或命名为container的元素的宽度高度都设置为200px

.box, .container {
	width: 200px;
	height: 200px;
}

六、包含选择器

语法： 选择符1 选择符2 { 属性: 属性值; }

• 选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2

以下表示class选择器命名为box的元素下面的p元素的字体大小设置为30px

.box p {
	color: red;
}

<div class="box">
	<p>哈哈</p>
</div>
<p>嘿嘿</p>

得出，第一个p标签中的"哈哈"字体为红色，而另外一个p标签中的颜色没有改变。

七、伪类选择器

语法： a:link { 属性: 属性值; } 超链接的初始状态

​ a:hover { 属性: 属性值; } 鼠标悬停时的状态

a:hover {
		color: red;
}

八、权重

通配符没有权重，可以说通配符对权重没有贡献

• 当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式

<div class="box">
	<p>哈哈</p>
</div>

如下，最终p的颜色是红色的，因为选择符.box p权重为11，而选择符p的权重为1

.box p {
	color: red;
}
p {
	color: blue;
}

• 相同权重的选择符，样式遵循就近原则：哪个选择符后定义，就采用哪个选择符的样式（注意⚠️：是css中定义该选择符的先后，而不是html中的使用先后）

<div class="box">
	<p class="text photo">哈哈</p>
</div>

如下，最终p的颜色是蓝色的，因为如下的两个选择符的权重相同，都为20，但是选择符.box .photo是后定义的，根据就近原则最终颜色为蓝色

.box .text {
	color: red;
}
.box .photo {
	color: blue;
}