当前位置：首页 > news >正文

Day11CSS特性

news 2026/6/23 14:15:15

CSS的特性包括继承性，层叠性，优先级

1.继承性
子级默认继承父级的文字控制属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS的继承性</title><style>body{color: red;font-size: 40px;font-weight: 700;}</style>
</head>
<body><div>div标签</div><span>span标签</span><p>p标签</p><!-- 如果标签有自己的样式则会生效自己的样式，不继承 --><a href="#">超链接</a><h1>h1标签</h1>
</body>
</html>

2.层叠性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>层叠性</title><style>div{color: blue;font-size: 40px;}div{color: red;font-weight: 700;}</style>
</head>
<body><div>她是个30岁了，至今还没有结婚的女人</div>
</body>
</html>

3.优先级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优先级</title><style>/* 技巧:选择器中标签的范围越大，优先级则越低 */div{color: blueviolet;}*{/* ！important,具有提权功能,提高选择器的优先级到最高，但需慎用 */color: red !important;}.box{color: aquamarine;}#test{color: violet;}</style>
</head>
<body><div class="box" id="test" style="color: blue;">只有洁净的人才能进入她的心怀</div>
</body>
</html>