一. css規則的分類
css的頂層樣式表由兩種規則組成的規則列表構成，一種被稱為at-rule,也就是at規則，另一種是qualified rule,也就是普通規則。
at-rule由一個@關鍵字和后續的一個區塊組成，如果沒有區塊則以分號結束。這些at規則正是掌握css一些高級特性所必須的內容。
普通規則也就是我們所熟知的規則，由選擇器和屬性指定構成的規則。
1.1 at規則
@charset
用於提示css文件使用的字符編碼方式，它如果被使用，必須出現在最前面，這個規則只在語法解析階段前使用，並不影響頁面上的展示效果。
//示例 @charset "utf-8";
@import
用於引入一個css文件，除了@charset規則不會被引入, @import可以引入另一個文件的全部內容。
//示例
@import "mystyle.css";
@import ulr("mystyle.css");
1.2 普通規則
普通規則主要由選擇器和聲明區塊構成。聲明區塊又由屬性和值構成。
//類選擇器
. myclass {
height: 200px;
widht: 300px;
}
1.2.1 選擇器
選擇器的基本意義是：根據一些特征，選中元素樹上的一批元素。
選擇器由簡單到復雜可以分為:
簡單選擇器: 針對某一特征判斷是否選中元素。
復合選擇器: 連續寫在一起的簡單選擇器，針對元素自身特征選擇單個元素。
復雜選擇器: 有“（空格）”， “ > ” , "~" , " + ", "||" 等符號連接的復合選擇器，根據父元素或者前序元素檢查單個元素。
選擇器列表: 由逗號分隔的復雜選擇器，表示“或”關系。
簡單選擇器：
類型選擇器：根據一個元素的標簽名來選中元素。
// 所有div背景顏色藍色
div {
background-color: blue;
}
<html>
<head></head>
<body>
<div>
我是div1
</div>
<div>
我是div2
</div>
<div>
我是div3
</div>
</body>
</html>
使用樣式前:
使用樣式后：
全體選擇器：可以選中任意元素，用法跟類型選擇器完全一致。
id選擇器: 針對特定屬性的選擇器, "#" 號后面跟隨id名
類選擇器: 針對特定屬性的選擇器, "." 號后面跟隨class名
屬性選擇器: [att] , [att = val] , [att~=val], [att|=val] ，[att*]
偽類選擇器: 以冒號開頭，分為普通型和函數型兩種
屬性選擇器:
[id] {
background-color: blue;
}
<html>
<head></head>
<body>
<div id = "div1">我是div1</div>
<div>我是div2</div>
<div id = "div3">我是div3</div>
</body>
</html>
測試結果:
[id = div1] {
background-color: blue;
}
<html>
<head></head>
<body>
<div id = "div1">我是div1</div>
<div>我是div2</div>
<div id = "div3">我是div3</div>
</body>
</html>
測試結果:
[att~=val]: 表示屬性的值是以空格分隔開來的
[id ~= div1] {
background-color: blue;
}
<html>
<head></head>
<body>
<div id = "div1 div5">我是div1</div>
<div>我是div2</div>
<div id = "div3">我是div3</div>
</body>
</html>
測試結果:
[att^=val] :表示val是以div開頭
[id ^= div] {
background-color: blue;
}
<html>
<head></head>
<body>
<div id = "div1 div5">我是div1</div>
<div>我是div2</div>
<div id = "div3">我是div3</div>
</body>
</html>
測試結果：
[att |= val] : 屬性等於val或者以val-開頭
[id |= div3] {
background-color: blue;
}
<html>
<head></head>
<body>
<div id = "div1 div5 div3">我是div1</div>
<div>我是div2</div>
<div id = "div3">我是div3</div>
<div id = "div3-">我是div4</div>
</body>
</html>
測試結果：
偽類選擇器：以冒號開頭，分為普通型和函數型兩種
樹結構關系偽類選擇器:
nth-child:
<style type="text/css">
div:nth-child(2n + 1) {
background-color: blue;
}
</style>
<html>
<head></head>
<body>
<div id = "div3 div5">
我是div1
</div>
<div>
我是div2
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果:
:first-child 和 :last-child分別表示第一個和最后一個元素
:nth-last-child: 和nth-child的區別是從后向前數。
of-type系列，是一個變形的語法糖，nth-of-type 和 nth-child一樣，以此類推，nth-last-of-type, first-of-type, last-of-type
鏈接與行為偽類選擇器
:any-link 表示任意的鏈接，包括a, area 和 link標簽都可能匹配到這個偽類
:link表示未訪問過的鏈接，:visited表示已經訪問過的鏈接
<style type="text/css">
a:link {
background-color: blue;
}
</style>
<html>
<head></head>
<body>
<div id = "div3 div5">
我是div1
<a href="#">空鏈接<>
<a href="https://www.baidu.com" >我是指向百度的</a>
<input id="abc" type="text"></input>
<input type="button" value="我是一個按鈕"></input>
</div>
<div>
我是div2
<a href="https://www.souhu.com" >我是指向百度的</a>
<link rel="help" >幫助頁面</link>
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果:
:hover表示懸停之上的元素,可以用於 div, a, input
<style type="text/css">
a:hover {
background-color: blue;
}
div:hover {
background-color: blue;
}
input:hover {
background-color: blue;
}
</style>
<html>
<body>
<div id = "div3 div5">
我是div1
<a href="#">空鏈接<>
<a href="https://www.baidu.com" >我是指向百度的</a>
<input id="abc" type="text"></input>
<input type="button" value="我是一個按鈕"></input>
</div>
<div>
我是div2
<a href="https://www.souhu.com" >我是指向百度的</a>
<link rel="help" >幫助頁面</link>
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果:
:active 表示用戶正在激活這個元素,可以用於 input, a標簽
<style type="text/css">
a:active {
background-color: blue;
}
</style>
<html>
<head></head>
<body>
<div id = "div3 div5">
我是div1
<a href="#">空鏈接<>
<a href="https://www.baidu.com" >我是指向百度的</a>
<input id="abc" type="text"></input>
<input type="button" value="我是一個按鈕"></input>
</div>
<div>
我是div2
<a href="https://www.souhu.com" >我是指向百度的</a>
<link rel="help" >幫助頁面</link>
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果:
:focus 表示焦點落在這個元素之上,可以是點中一個輸入框，或者點中一個按鈕。
<style type="text/css">
input[type=text]:focus {
background-color: blue;
}
</style>
<html>
<head></head>
<body>
<div id = "div3 div5">
我是div1
<a href="#">空鏈接<>
<a href="https://www.baidu.com" >我是指向百度的</a>
<input id="abc" type="text"></input>
<input type="button" value="我是一個按鈕"></input>
</div>
<div>
我是div2
<a href="https://www.souhu.com" >我是指向百度的</a>
<link rel="help" >幫助頁面</link>
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果:
邏輯偽類選擇器
:not偽類 示例中表示沒有鼠標懸浮在上面的a標簽背景顏色設置為藍色
<style type="text/css">
a:focus(:hover) {
background-color: blue;
}
</style>
<html>
<head></head>
<body>
<div id = "div3 div5">
我是div1
<a href="#">空鏈接<>
<a href="https://www.baidu.com" >我是指向百度的</a>
<input id="abc" type="text"></input>
<input type="button" value="我是一個按鈕"></input>
</div>
<div>
我是div2
<a href="https://www.souhu.com" >我是指向百度的</a>
<link rel="help" >幫助頁面</link>
</div>
<div id = "div3">
我是div3
</div>
<div id = "div3-ch">
我是div4
</div>
</body>
</html>
測試結果：
其他偽類選擇器
用於處理table的列的偽類
:nth-col , :nth-last-col
用nth-child實現表格樣式
<style type="text/css">
table tr td:nth-child(even) {
background-color: blue;
}
</style>
<html>
<body>
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
</tr>
</table>
</body>
</html>
測試結果:
復雜選擇器
“ （空格） ”，“ > ”, " ~ ", " + ", " || "
"空格" : 父類選擇器
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
#div1 a {
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<a href="#">我是一個a標簽</a>
<div>我是一個div
<a href="#">我是第二個a標簽</a>
<input type="text">我是一個輸入框</input>
</div>
</div>
</body>
</html>
測試結果:
“>” 子類選擇器
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
#div1 > a {
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<a href="#">我是一個a標簽</a>
<div>我是一個div
<a href="#">我是第二個a標簽</a>
<input type="text">我是一個輸入框</input>
</div>
</div>
</body>
</html>
測試結果:
"~" 后繼，表示選中元素的后一個元素，這個元素必須與選中元素同一個父類
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
#div1 > a ~ div {
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<a href="#">我是一個a標簽</a>
<div>我是一個div
<a href="#">我是第二個a標簽</a>
<input type="text">我是一個輸入框</input>
</div>
</div>
</body>
</html>
測試結果：
“+” 直接后繼
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
#div1 > a + div {
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<a href="#">我是一個a標簽</a>
<div>我是一個div
<a href="#">我是第二個a標簽</a>
<input type="text">我是一個輸入框</input>
</div>
<div>我是第二個div
<a href="#">我是第二個a標簽</a>
<input type="text">我是一個輸入框</input>
</div>
</div>
</body>
</html>
測試結果:
組合選擇器的優先級
無連接符號 > "空格",">","+","~","||" > “，”
示例:
.c,.a>.b.d{
}
可以理解成 .c 和 .a>.b.d; .a>.b.d又分成 .a 和 .b.d
選擇器的優先級
id選擇器 > 偽類選擇器和類選擇器 > 偽元素選擇器和標簽選擇器
同一優先級的選擇器遵循后面的覆蓋前面的，行內屬性的優先級永遠高於css規則，瀏覽器提供一個“口子”，就是在選擇器前加上"!important"這個用法非常危險，它相當於一個新的優先級，而且此優先級會高於行內屬性。
偽元素
::first-line , ::first-letter , ::before , :: after
::first-line 把第一行的字母顏色變成黃色，而且必須出現在最內層塊級元素。
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
p::first-line{
color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<span>的空間的大家看大家都大家看大家都健康的時間開始</span><br/>
<span>的空間的大家看大家都大家看大家都健康的時間開始</span>
<p>大家看了大家都時間了大家誰看得見大家看了幾點睡的打卡<br/>
記錄打開數據多久了時間的大家看手機多久了大家手機打開了手機</p>
</div>
</body>
</html>
測試結果:
::before 和 ::after
這兩個偽元素和前面不同的是，它不是把已有的內容套上一個元素，而是真正的無中生有，造成一個元素。
<html>
<head>
<title>標簽使用</title>
<style type="text/css">
p.special::before{
display: block;
content: "pseudo! ";
}
</style>
</head>
<body>
<div id="div1">
<p class="special">I'm real element</p>
</div>
</body>
</html>
測試結果：
