1011 前端之CSS的屬性引入方式、選擇器、選擇器優先級
一、CSS介紹
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
二、CSS語法
2.1CSS實例
每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。
2.2 CSS注釋
/*這是注釋*/
注釋是代碼之母。
三、css屬性的引入方式
3.1 行內樣式
行內樣式是在標記的style屬性中設定CSS樣式，不推薦大規模使用。
<body>
<div style="width: 10px;height: 20px;background-color: red"></div>
<div class="a"></div>
<div class="b"></div>
</body>
3.2 內部樣式
內部樣式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--內部樣式-->
<style>
.a{
width: 10px;
height: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<!--行內樣式-->
<div style="width: 10px;height: 20px;background-color: red"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
3.3 外部樣式
外部樣式就是將CSS寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。
<link/>標簽也要寫在<head></head>標簽對中
<link rel="stylesheet" href="b.css"/>
四、CSS選擇器
4.1 元素選擇器
元素選擇器，只要是這個元素都會被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>zyl
<div>handsome</div>
</div>
</body>
</html>
上述代碼就是元素選擇器選擇了div元素，那所有的div元素就都被選中，里面的內容就都會變成紅色
4.2 id選擇器
標簽中要寫id屬性，#代表id屬性，下面代碼中#a就是選擇id=a的標簽讓其顏色為紅
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{color:red;}
</style>
</head>
<body>
<div id="a">x-man</div>
</body>
4.3 類選擇器
用.類屬性來選擇
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{color:red;}
/*這就是選擇類為a的標簽*/
</style>
</head>
<body>
<div class="a">x-man</div>
<div class="p">x-man</div>
</body>
注意：
樣式類名不要用數字開頭（有的瀏覽器不認）。
標簽中的class屬性如果有多個，要用空格分隔。
4.4 通用選擇器
用*就是選擇所要標簽
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<div>zyl</div>
<span>wwb</span>
<p>yjy</p>
</body>
4.5 后代選擇器
div div：為div內部的div元素內容設置字體顏色，下面的代碼中所有的后代div元素字體顏色都設置為了紅色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div div{
color: red;
}
</style>
</head>
<body>
<div>zyl
<div>第一個兒子：ypp</div>
<div>孫子</div>
<div>第二個兒子：aaa</div>
</div>
</body>
4.6 兒子選擇器
div>p，下面代碼就是選擇父級是div的p元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div class="a">我是爸爸
<p class="b">我是兒子</p>
<span class="c">我是孫子</span>
</div>
</body>
4.7 毗鄰選擇器
div+p：選擇緊靠着div元素之后的p元素。下面的代碼就只有aaa顏色會變紅
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div+p{
color: red;
}
</style>
</head>
<body>
<div>zyl</div>
<p>aaa</p>
<p>bbb</p>
</body>
4.8 兄弟選擇器
span~.a：選擇span后面的所有類為a的兄弟元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span~.a{
color: red;
}
</style>
</head>
<body>
<div>
<span>span</span>
<h1 class="a">h1</h1>
<h2 class="a">h2</h2>
<p>p</p>
<h4 class="a">h4</h4>
</div>
</body>
4.9 屬性選擇器
div[name]：選取帶有指定屬性的元素。下面的代碼就是選擇帶有name屬性的div元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div[name]{
color: red;
}
</style>
</head>
<body>
<div name="123">div</div>
<div name="234">我是div</div>
<div>沒有屬性的div</div>
</body>
4.10 分組和嵌套選擇器
分組：
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
嵌套：
多種選擇器可以混合起來使用。
下面的代碼就是類選擇器、后代選擇器的嵌套和分組使用，選擇類為b的div元素的后代中類為a的div元素和p元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div .b .a,p{
color: red;
}
</style>
</head>
<body>
<div>div
<div class="b">345
<div class="a">456</div>
</div>
<div class="a">567</div>
</div>
<p>p</p>
</body>
4.11 偽類選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 未訪問的鏈接 */
a:link{
color: yellow;
}
/* 鼠標移動到鏈接上 */
a:hover{
color:red;
}
/* 選定的鏈接 */
a:active{
color: green;
}
/* 已訪問的鏈接 */
a:visited{
color: pink;
}
</style>
</head>
<body>
<a href="偽類選擇器">點我</a>
</body>
4.12 偽類元素選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*設置首字母樣式*/
p:first-letter{
font-size: 48px;
color: red;
}
span{
color: pink;
}
/*在p元素之前插入內容*/
p:before{content: "123456"; color: aqua}
/*在span元素之后插入內容*/
span:after{content:"紫霞"; color: green}
</style>
</head>
<body>
<p>我愛你</p>
<span>愛你一萬年</span>
</body>
五、選擇器的優先級
5.1 CSS繼承
繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。
body { color: red; }
此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。
p { color: green; }
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
5.2 選擇器的優先級
按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：
除此之外還可以通過添加 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護。
萬不得已可以使用!important