版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/coderinchina/article/details/84476985
css三大特性
1 层叠性:就是对同一个标签设置了相同的属性后,后面的会把前面设置的属性覆盖掉,就好比Java中的子类去复写了父类中的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
p{
color: red;
font-size: 30px;
}
p{
color: bisque;
}
</style>
</head>
<body>
<p>今天天气真好</p>
</body>
</html>
比如上面的p标签 color属性就发生了层叠,而font-size还是使用第一个设置的属性30.很好理解,就是一个就近原则问题,当发生层叠时候,谁离p标签近就使用哪个
2 继承性:就是在写css样式时,子标签会继承父标签某些样式,比如文本颜色和字号,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
.father{
color: pink;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<p>今天天气不错</p>
</div>
</body>
</html>
虽然没有给p标签设置背景色和文本颜色,但是他会从父标签也就是div标签中继承这二个属性
3 优先级 所谓优先级就是你在某个标签中设置好几个样式,最后根据优先级决定显示优先级高的那个样式,比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
.aa{
color: pink;
}
p{
color: red;
}
</style>
</head>
<body>
<div>
<p class="aa">今天天气不错</p>
</div>
</body>
</html>
最后发现文本颜色还是会显示pink这种颜色,说类选择器>标签选择器,而id选择器都这二个优先级都高,而行内选择器比上面说的三个更高,优先级最高的是!important
p{
color: red!important;
}
而*通配符优先级是最低的.