1.继承
子代可以直接使用父代的某些样式(特征),当然有些可以继承,有些不能继承。
例:<style type="text/css">
#div1{
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<div id="div1">
介是div1的内容
<div id="div2">
介是div1的后代div2中的内容
</div>
</div>
</body>
div2虽然没有设定这样的样式,但是实际上却使用了该样式。说明它的样式从它的父代div1那里继承而来。
但是并不是所有的属性都可以被继承<styletype="text/css">
#div1{
font-size: 24px;
color: red;
border: 2px solid red;
}
</style>
从结果反应出来,div2并没有边框,也就是说border没有被继承,可以进一步通过开发者工具来佐证
哪些属性能被继承?哪些属性不能被继承?
不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、 min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、 vertical-align、page-break-after、page-bread-before和unicode-bidi。 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承:text-indent和text-align。 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
2.层叠性
例:
<styletype="text/css">
div{
background-color: red;
}
.zz{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<divclass="zz"></div>
</body>
从结果可以看出,虽然设置了两个不同的选择器,但是两个选择器内设置的样式同样都被运用上。
3.优先级
在现实生活中当多条相互冲突的规则施加到同一事物时,也必须制定一个原则,也就是优先级。
内联>选择器>类选择器>元素选择器
内部样式>外部样式