CSS 特性
2018-12-02 本文已影响8人
roy_pub
层叠性
- 样式冲突，遵循就近原则
- 样式不冲突，不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
p {
color: green;
font-size: 25px;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
结果为红色25px的：Hello World
继承性
子标签会继承父标签的某些样式，一般和文本相关的会继承，比如文字颜色，大小，样式等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
.inherit {
color: cyan;
}
</style>
</head>
<body>
<div class="inherit">
<p>Hello world</p>
</div>
</body>
</html>
优先级
| 优先级 | 权重 |
|---|---|
| * / 继承 | 0，0，0，0 |
| 标签 | 0，0，0，1 |
| 类，伪类 | 0，0，1，0 |
| id | 0，1，0，0 |
| 行内样式 | 1，0，0，0 |
| !important | ∞ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
div {
color: cyan;
}
.green {
color: green;
}
#red {
color: red;
}
</style>
</head>
<body>
<div id="red" class="green">
Hello World
</div>
</body>
</html>
结果为红色的：Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
div {
color: cyan;
}
.green {
color: green!important;
}
#red {
color: red;
}
</style>
</head>
<body>
<div style="color: orange;" id="red" class="green">
Hello World
</div>
</body>
</html>
结果为绿色的：Hello World
权重相同，就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
p {
color: green;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
结果为红色的：Hello World
权重会叠加
- div ul li -> 0，0，0，3
- .nav ul li -> 0，0，1，2
- a:hover -> 0，0，1，1
- .nav a -> 0，0，1，1
- #nav p -> 0，1，0，1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inherit</title>
<style>
div p {
color: green;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
结果为绿色的：Hello World
