继承性
有一些属性,当给自己设置的时候,自己的后代都继承上了,如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,那么无需数标签数量,无需看谁是后写的,只需遵循则就近原则。