继承性
有一些属性，当给自己设置的时候，自己的后代都继承上了，如color、text-开头的、line-开头的、font-开头的。
<style type="text/css">
div{
color:blue;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
不是所有属性都能够继承，如上图，color属性会被继承，但border属性没有被全部继承。总结：关于文字样式的都能够继承，关于盒子、定位、布局的属性都不能继承。
如果我们页面的文字都是灰色，都是14px，那么就可以利用继承性：
body{
color:gray;
font-size:14px;
}
继承性是从自己开始，直到最小元素。
如：
<style type="text/css">
div{
color:blue;
font-style:italic;
text-decoration: underline;
font-weight:bold;
background-color:yellow;
}
</style>
</head>
<body>
<div>
<div>
<div>
我是文字
<div>
我是文字
<ul>
<li>
<span>
<a href="">
我是文字
</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
层叠性即处理冲突的能力
<style type="text/css">
p{
color:red;
}
.ppage{
color:green;
{
#para1{
color:blue;
}
</style>
</head>
<body>
<p class="ppage" id="para1">我到底是什么颜色？</p>
</body>
以上句子是绿色。
<style type="text/css">
#box1 .hezi2 p{
color:red;
}
div div #box3 p{
color:green;
}
div.hezi1 div.hezi2 div.hezi3 p{
color:blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>我到底是什么颜色？</p>
</div>
</div>
</div>
</body>
以上句子是红色。
继承或者*的贡献值：
每个元素（标签）贡献值为0,0，0,1
每个类，伪类贡献值为0,0，1,0
每个ID贡献值为0,1，0,0
每个行内样式贡献值1,0，0,0
每个!important贡献值∞无穷大
解析：
一个id选择器，一个类选择器，一个标签选择器，记作1,1,1
一个id选择器，0个类选择器，三个标签选择器，记作1,0,3
0个id选择器，3个类选择器，4个标签选择器，记作0,3,4
当选择器选择上了某个元素时，要分别数一下id选择器、类选择器和标签选择器的数量。按照稀有程度，id的权重大于类，类大于标签。
如果权重一样，则以后者为准，由于p标签在后，所以是红色：
<style type="text/css">
#box2 div .pp{
color:blue;
}
#box1 .hezi2 p{
color:red;
}
</style>
如下所示，第一个选择器的权重是0,0,13，第二个选择器的权重是0,1,0。不进位，所以是蓝色：
<style type="text/css">
div div div div div div div div div div div div p{
color:red;
}
.heng{
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<p class="heng">
我到底应该是什么颜色嗷嗷嗷
</p>
</div>
</div>
</div>
</div>
</div>
</div>
如下所示，权重一样，则以后出现的那个为准，所以是蓝色：
<style type="text/css">
#box1 .hezi2 p{
color:red;
}
#box2 div .pp{
color:blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p class="pp">那我到底是什么颜色啊</p>
</div>
</div>
</div>
</body>
如下所示，这样的话依然是红色，因为第一个选择器权重是0,1,2，第二个选择器权重是0,1,0：
<style type="text/css">
.nav ul li{
color:red;
}
.teshu{
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="teshu">word</li>
<li>word</li>
<li>word</li>
</ul>
</div>
</body>
如果以上字体想变成蓝色，则可以将CSS编辑器改成：
<style type="text/css">
.nav ul li{
color:red;
}
.nav ul li.teshu{
color:blue;
}
</style>
如下所示，p标签应该是蓝色，因为如果不能直接选中某个元素，而是通过继承性影响的话，则权重是0：
<style type="text/css">
#box{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p>哈哈哈哈</p>
</div>
</body>
在开始数权重之前，一定要看是不是真的选中了文字所在的最内层标签，如果不能直接选中某个元素，而是通过继承性影响的话，那么权重是0。如下所示，没有选中p，所以权重为0，应是绿色：
<style type="text/css">
#hezi1 #hezi2 #hezi3{
color:red;
}
div.box div.box div.box{
color:blue;
}
p{
color:green;
}
</style>
</head>
<body>
<div class="box" id="hezi1">
<div class="box" id="hezi2">
<div class="box" id="hezi3">
<p>猜我啥色</p>
</div>
</div>
</div>
</body>
html内容不变，css选择器变成如下所示，则是黄色：
<style type="text/css">
#hezi1 #hezi2 #hezi3{
color:red;
}
div.box div.box div.box{
color:blue;
}
div.box div.box div.box .pp{
color:yellow;
}
p{
color:green;
}
</style>
如果大家权重都是0，则有就近原则——谁描述的近就听谁的：
上述html内容不变，css选择器变成如下所示，显示红色：
<style type="text/css">
#hezi3{
color:red;
}
#hezi1 #hezi2{
color:blue;
}
</style>
hezi1、hezi2只描述到了倒数第三层，而hezi3描述到了倒数第二层，hezi3描述的更接近。
总结：先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重，谁大听谁的，如果都一样，则以后写的为准。如果没有选中，那么权重是0。如果大家都是0，那么无需数标签数量，无需看谁是后写的，只需遵循则就近原则。
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
