繼承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
div {
color:red;
font-size:30px;
background:skyblue;
text-decoration: none;
}
</style>
</head>
<body>
<!--
1：什么是繼承性？給父元素設置一些屬性，子元素也可以使用
注意點：
1：並不是所有的屬性都可以繼承，只有以color/font-/text-/line開頭的才可以繼承
2：在CSS的繼承中不僅僅是兒子可以繼承，只要是后代都可以繼承
3：CSS繼承性中的特殊性：
a標簽的文字顏色和下划線是不能繼承的
h標簽的文字大小是不能繼承的
-->
<div>
<p>CSS的繼承性（繼承DIV屬性，但不繼承background屬性）</p>
</div>
<div>
<ul>
<li>
<p>這是一個段落（繼承DIV屬性，但不繼承background屬性）</p>
</li>
</ul>
</div>
<div>
<a href="#">這是一個超鏈接（不繼承DIV屬性）</a>
</div>
<div>
<h1>這是一個標題（不繼承DIV文字大小的屬性）</h1>
</div>
</body>
</html>
層疊性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
p {
color:red;
}
.para {
color:blue;
}
</style>
</head>
<body>
<!--
1：什么是層疊性？層疊性就是CSS處理沖突的一種能力
注意點：
層疊性只有在多個選擇器選中“同一標簽”，然后又設置了“相同的屬性”，才會發生層疊性
CSS全稱：Cascading StyleSheet
-->
<p id="identity" class="para">這是段落</p>
</body>
</html>
優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
/*
ul {
color:red;
}
li {
color:blue;
}*/
</style>
</head>
<body>
<!--
1：什么是優先級？當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
2：優先級判斷的三種方式
2.1 是否是直接選中（間接選中就是指繼承）；如果是間接選中，那么就是誰離目標近就繼承誰
2.2 是否是相同的選擇器，如果都是直接選中並且都是同類型的選擇器，那么就是誰寫在后面就聽誰的
2.3 不同選擇器：如果都是直接選中，並且不是相同類型的選擇器，那么就會按照選擇器的優先級來層疊
id > 類 > 標簽 > 通配符 > 繼承 > 瀏覽器默認
-->
<ul>
<li>
<p id="identity" class="para">這是段落</p>
</li>
</ul>
</body>
</html>
!important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
#identity {
color:purple;
}
p {
color:green !important;
}
</style>
</head>
<body>
<!--
1：什么是important
作用：用於提升某個直接選中標簽的選擇器中的某個屬性的優先級的，可以將被指定的屬性的優先級提升為最高
注意點：
1：important只能用於直接選中，不能用於間接選中
2：通配符選擇器選中的標簽也是直接選中的
3：!important只能提升被指定的屬性的優先級，其它的屬性的優先級不會被提升
4：!important必須要寫到分號的前面且感嘆號不能省略
-->
<ul>
<li>
<p id="identity" class="para">這是段落</p>
</li>
</ul>
</body>
</html>
