权值问题，没计算明白，求解答
p{color:red;}
.first{color:green;}
p>span{color:purple;}
span{color:pink;}
第一行权值为1，第二行权值为10，第三权值为2，第四行权值为0.1，为啥显示的是紫色？而不是绿色？难道是在类选择器的基础上在进行包含选择，所以权值为12 ，显示紫色么？不是很明白权值的计算操作
慕斯529798
2018-07-22
6 回答
做个实验：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>特殊性</title>
<style type="text/css">
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
1.毫无疑问，这两段文字打印出来是黑色的。
2.在<style>标签中加入
p{color:red;}
结果：两段文字都变成红色。
分析：第一段，<p>里面包含了一个<span>,这样，相对这两个标签而言，p是父标签，span是子标签；父标签定义了css样式，而子标签没有定义css样式，那么，子标签会继承父标签的css样式，权值为0.1,所以span里的文字也为红色。
3.再加入代码，变成
p{color:red;}
.first{color:green;}
结果：第一段文字变成绿色，第二段文字是红色。
分析：对于第一段文字，有标签选择器和类选择器都适用，但是选择哪个？类选择器权值为10，应用类选择器.first的规则，文字是绿色。对于第一段p标签里的span标签，仍会继承父标签p的样式，权值为0.1，span里的文字也是绿色。
4.再加入代码，变成
p{color:red;}
.first{color:green;}
span{color:pink;}
结果：第一段文字是绿色，其中的“胆小如鼠”四个字是粉色；第二段文字是红色。
分析：对于第一段p里的文字，应用的是.first里的css样式，权值为10，而span标签从父标签p继承到的样式（绿色）权值为0.1，但这是span自己定义了标签样式，权值为1，是粉色，所以span应用自己的css样式，里面的文字“胆小如鼠”是粉色。
5.继续加入代码：
p{color:red;}
.first{color:green;}
span{color:pink;}
p span{color:purple;}
结果，第一段文字为绿色，其中的“胆小如鼠”四字为紫色；第二段的文字为红色。
分析：由4可知，第一个p标签有两个可选样式，p标签选择器（权值1）和.first类选择器（权值10），第一个p标签应用的是.first类选择器；对于其中的span标签，此时有三个选择器是适用的，但是选择哪个呢?分别计算一下权值。第一个样式，是从父选择器继承下来的样式，是绿色，权值为0.1，第二个样式，是span标签自己的选择器span{color:pink;},是粉色，权值为1，第三个样式是组合选择器的样式p span{color:purple;},紫色，权值为1+1=2。这其中2>1>0.1,所以span里的文字“胆小如鼠”颜色是紫色。
6.继续加入代码
p{color:red;}
.first{color:green;}
span{color:pink;}
p span{color:purple;}
.first span{color: yellow;}
结果：第一段文字为绿色，其中“胆小如鼠”四字为黄色；第二段文字为红色
分析：接5分析，针对第一段p标签里的span而言，此时又多了一个选择样式，也是组合选择器样式，为黄色，权值为10+1=11，span应用此选择器样式。
举报
0/150
提交
取消
