版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mintsolace/article/details/77982075
1.
<style type="text/css">
#haha .heiheihei p{
color:red;
}
div div #xixi p{
color:blue;
}
div.hahaha div.heiheihei div.xixixi p{
color:green;
}
</style>
</head>
<body>
<div id="haha" class="hahaha">
<div id="heihei" class="heiheihei">
<div id="xixi" class="xixixi">
<p>猜我啥色</p>
</div>
</div>
</div>
</body>三个都选中了p标签，但是第三个没有id选择器，第二个没有类选择器。按权重则第一个（1,1,1），第二个（1,0,3），第三个（0,3,4）。所以是红色。
2.
<style type="text/css">
div p{
color:red;
}
#box{
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p id="para" class="spec">
<span>what color is it?</span>
</p>
</div>
</body>第一个和第二个都没有选中span标签，大家权重都是0，比就近，p离的更近，所以是红色。
3.
<style type="text/css">
span{
color:green;
}
.nav{
color:red;
}
.nav ul li{
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><span>shenmeyansea</span></li>
<li><span>shenmeyansea</span></li>
<li><span>shenmeyansea</span></li>
</ul>
</div>
</body>第二个和第三个都没有选中span，权重都是0，第一个的权重是（0,0,1），所以是绿色。
4.
<style type="text/css">
#box1 div.spec2 p , #box1 #box2 p{
color:blue;
}
#box1 #box3 p{
color:green;
}
</style>
</head>
<body>
<div id="box1" class="spec1">
<div id="box2" class="spec2">
<div id="box3" class="spec3">
<p>haha</p>
</div>
</div>
</div>
</body>逗号是表示并集选择器，即分组选择器，要拆开计算，也就相当于写了两个标签。其实CSS选择器也就相当于:
<style type="text/css">
#box1 div.spec2 p {
color:blue;
}
#box1 #box2 p{
color:blue;
}
#box1 #box3 p{
color:green;
}
</style>第一个选中了，权重是（1,1,2）；第二个选中了，权重是（2,0,1）；第三个选中了，权重是（2,0,1）。后两者权重一样的时候，以第三个为准。
5.
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">这行字是什么颜色？</p>
</div>
</body>选择了p就选择了文字，三个选择器都选了。第一个权重（2,0,0），第二个权重（1,1,1），第三个权重（0,2,2）。
6.
<style type="text/css">
#father{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>这行字是什么颜色？</p>
</div>
</body>继承性标签权重是0，p标签被选中了，权重是（0,0,1），所以是蓝色。
7.
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">这行字是什么颜色？</p>
</div>
</body>第一个和第三个都选中了，所以看权重，第一个（0,0,1），第三个（0,1,1），所以是蓝色。
8.
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
到底是什么颜色啊啊啊啊啊啊啊
</div>
</div>
</div>
</body>两个都选中了（选择器只看祖先结构，只表示选中or未选中；不能表示具体选中了哪一个div，只表示已经选择上了内层div）。第一个权重（0,0,2），第二个权重（0,0,1）。
9.
<style type="text/css">
#box1 div{
color:red;
}
#box3{
color:blue;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
到底是什么颜色啊
</div>
</div>
</div>
</body>两个选择器都选中了，第一个选择器表示box1的所有后代选择器都选择上了，也就选择上了最内层div，是有权重的（1,0,1）。第二个选择器也选择上了最内层div，也是有权重的（1,0,0）。并不是通过继承影响的。
同一个标签携带多个类名有冲突——取决于CSS中写在后面的选择器
1.我是蓝色
<style type="text/css">
.spec1{
color:red;
}
.spec2{
color:blue;
}
</style>
</head>
<body>
<p class="spec1 spec2">我是什么颜色？</p>
</body>2.我是红色
<style type="text/css">
.spec2{
color:blue;
}
.spec1{
color:red;
}
</style>
</head>
<body>
<p class="spec1 spec2">我是什么颜色？</p>
</body>3.我是红色
<style type="text/css">
.spec2{
color:blue;
}
.spec1{
color:red;
}
</style>
</head>
<body>
<p class="spec2 spec1">我是什么颜色？</p>
</body>4.我是蓝色
<style type="text/css">
.spec1{
color:red;
}
.spec2{
color:blue;
}
</style>
</head>
<body>
<p class="spec2 spec1">我是什么颜色？</p>
</body>5.
html:
<div class="c1" id="box1">
<div class="c2" id="box2">
<div class="c3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>第一种CSS：
<style type="text/css">
#box1 #box3{
color:green;
}
#box2 #box3{
color:blue;
}
</style>第二种CSS：
<style type="text/css">
#box2 #box3{
color:blue;
}
#box1 #box3{
color:green;
}
</style>权重一样，颜色取决于后者。
所有的权重计算，不存在任何兼容问题！