权值问题，没计算明白，求解答-慕课网

首页课程实战体系课手记专栏慕课教程

权值问题，没计算明白，求解答

来源：9-3 权值计算-特殊性

慕斯529798

2018-07-22 12:48

p{color:red;}

.first{color:green;}

p>span{color:purple;}

span{color:pink;}

第一行权值为1，第二行权值为10，第三权值为2，第四行权值为0.1，为啥显示的是紫色？而不是绿色？难道是在类选择器的基础上在进行包含选择，所以权值为12 ，显示紫色么？不是很明白权值的计算操作

写回答关注

6回答

worker1991

2018-09-01 00:11:28

做个实验：
<!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应用此选择器样式。

1 4

鱼鱼鱼哟

优秀啊

2019-03-21 18:18:20

共 1 条回复 >
qq_分流_0

2018-08-14 09:29:42

先比较范围若范围不一样则以小范围优先若范围一样比较权值权值大优先权值一样内联式优先
比如p>span这个子选择器的意义是p标签的第一代子标签<span>全为紫色我们先来看范围
这个p>span标签的范围和上面span的作用范围一样所以比较权值明显看出前者大所以为紫色
再看p和.first范围一样比较权值明显.first大所以整体为绿色
又因为span的作用范围小所以颜色不受大范围的标签控制
个人理解错误请纠正

0 0
慕沐4974640

2018-07-22 19:19:48

别去纠结了，先往后面学，就算是不会等你开发的时候又不得非要这样子

0 1
见风如你ym思念成疾

2018-07-22 13:28:07

span用了后代选择器，p中所有的span都是紫色的

0 0
肥宅风见啸

2018-07-22 13:24:31

额，那个第三个是子代选择器，它的权值高于同一级其他的，具体的可以参照CSDN的这篇文章https://blog.csdn.net/MYTLJP/article/details/78208465

1 0

肥宅风见啸

也不能叫其他的，应该说是略高于基本选择器

2018-07-22 13:26:36

共 1 条回复 >
慕标9784486

2018-07-22 13:24:10

第三行写错了，所以权值也不是2，第三行应该写为p span{color:purple;}才行

0 0