第一题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
#father #son{ /*1*/
color: blue;
}
#father p.c2{ /*2*/
color: black;
}
div.c1 p.c2{ /*3*/
color: red;
}
#father{ /*4*/
color: green !important;
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2" >
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
问题：
p标签中的文字是什么颜色？
解析：
首先，排除第4，虽然 !important拥有最高权重，但是p标签继承权重为0。
根据ID选择器>类选择器>标签选择器，排除第2和第3。
答案：
blue
第二题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
#father{ /*1*/
color: red;
}
p{ /*2*/
color: blue;
}
</style>
<body>
<div id="father">
<p>
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
问题：
p标签中的文字是什么颜色？
解析：
p标签继承权重为0
答案：
blue
第三题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
</head>
<style type="text/css">
div p{ /*1*/
color: red;
}
#father{ /*2*/
color: red;
}
p.c2{ /*3*/
color: blue;
}
</style>
<body>
<div id="father">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
问题：
p标签中的文字是什么颜色？
解析：
继承权重为0，排除第二。
类选择器>标签选择器，排除第1。
答案：
blue
第四题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
<style type="text/css">
div div{ /*1*/
color: blue;
}
div{ /*2*/
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html>
问题：
div标签中的文字是什么颜色？
解析：
通过计算选择符中标签选择器和伪元素选择器的个数之和，得到：
第1为个数之和为2，第2个数之和为1。
最后，比较个数大小。
计算规则：
- 计算选择符中 ID 选择器的个数（a），
- 计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），
- 计算选择符中标签选择器和伪元素选择器的个数之和（c）。
- 按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
答案：
blue
第五题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
<style type="text/css">
div div div div div div{ /*1*/
color: red;
}
.me{ /*2*/
color: blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div class="me">
试问这行字体是什么颜色的？
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
问题：
div标签中的文字是什么颜色？
解析：
类选择器>标签选择器，排除第1。
答案：
blue
第六题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-样式权重精华6题</title>
<style type="text/css">
.c1 .c2 div{ /*1*/
color: blue;
}
div #box3{ /*2*/
color: green;
}
#box1 div{ /*3*/
color: yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html>
问题：
试问这行字体是什么颜色的？
解析：
根据ID选择器>类选择器，首先排除第1。
因为第2和第3都有ID选择器，接下来就得看ID选择器和标签选择器的个数，但是刚好都相同。
这时候就遵循就近原则。
答案：
yellow