前端剑法第二式————淬焰
金石礪身，赤焰淬魄，困燥褪去，幽玄寒鋒，神兵天成
前端的學習總是繁多而細膩，需要去背誦記憶，不可好高騖遠，眼高手低，切記切記
今日學習內容如下：
目錄
網頁
css -層疊樣式表?-設置網頁中元素的樣式
css有三種書寫方法
?CSS的語法：
接下里講的就是選擇器了
常用選擇器
1、標簽選擇器 ?
2、id選擇器
3、class選擇器
4、全部選擇器
復合選擇器
交集選擇器
并集選擇器
關系選擇器
父子選擇器?
后代選擇器
兄弟選擇器
元素之間的關系
屬性選擇器
偽類選擇器
一 、偽類（不存在的類，特殊的類）
二、:not() 否定偽類
a元素的偽類選擇器
1、:link ?用來表示未訪問過的鏈接（正常鏈接）
2、:visited 用來表示訪問過的鏈接
3、:hover 用來表示鼠標移入的狀態
4、:active ?鼠標點擊后的狀態
偽元素選擇器
樣式的繼承（繼承祖先的資產）
選擇器權重
jw+n：快速寫n個漢字
網頁
? ? ? ??分成三個部分
? ? ? ?結構，表現 （外在顯示的樣子），行為 ?
結構就是html，即在html文件中的代碼，大概由20個左右標簽組成
表現即是css，是html表現在網頁中內容的進一步修改美觀
css -層疊樣式表?-設置網頁中元素的樣式
? ? ? ?網頁實際上是一個多層的結構，通過css可以分別為網頁的每一層來設置樣式，而最終我們能看到的只有最上邊的一層
css有三種書寫方法
? ? ? ?第一種書寫方式：內聯樣式/行內樣式（不推薦使用）
即在body里寫style樣式，如下
<body>
? ? style="width: 200px; height: 100px; background-color: pink;"
? ? <div ></div>
</body>
不推薦使用原因：
- ? ? ? 權重太高
- ? ? ? 結構和樣式耦合
- ? ? ? 不方便修改
? ? ? 第二種書寫方式：內部樣式表（小的項目可以使用）
即在head里寫style樣式，與html的body部分分開寫，如下
<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <style>
? ? </style>
? </head>
? <body>
? ? <div ></div>
? </body>
</html>
不推薦寫大項目原因
- ? ? ? 會導致html文件過長過多
- ? ? ? 不方便復用
? ? ? ?第三種書寫方式：外部樣式表（推薦使用）
即另創建一個css文件，通過在html里link使得html與css鏈接，如下
<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <link rel="stylesheet" href="./1.css">
? </head>
最推薦使用，初學者要多多習慣使用，后期全都是使用外部樣式表寫css
另注意，一般一個成熟的項目應有
css文件夾，img文件夾（圖片素材），js文件夾（還沒學）和我們代碼的主體html，如下圖
?
而css文件夾里需要至少三個css
index.css：主要樣式表（即我們的主css，html中主要的樣式都寫里面）
base.css：公共樣式表（每個頁面都通用的樣式）
reset.css：重置樣式表（用于需要重置時設置的樣式）
base.css與reset.css是用來補充index.css的，可以有效精簡index.html的篇幅
?CSS的語法：
? ? ? ? ? 選擇器 {聲明塊}? ??? ?
? ? ? ? 聲明塊：名值對結構 ? ?樣式名:樣式值;
例：.box{ color:red}
? 選擇器? ?聲明塊? ? 樣式值? ??
接下里講的就是選擇器了
選擇器是前端的基礎中的基礎，如果選擇器學的不好，前端之路將寸步難行
常用選擇器
1、標簽選擇器 ?
? ? ? ? 語法：標簽名{}? ?例：ul{}
即直接用標簽名
2、id選擇器
? ? ? ? ?語法：#id屬性值{}? ?例：#box{}?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?id=box
? ? ? ? ?注意：id屬性值不能以數字開頭，不建議漢字，不能重復使用
一般只有大的區塊用一下。
3、class選擇器
? ? ? 語法：.class屬性值{}? ?例：.box{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class=box
最常用的選擇器，文中無特殊需求基本上都用class選擇器
4、全部選擇器
? ? ? 語法：*{}? ? 例：*{? margin：auto 0}；
即選中全部，通常css一開始設置或者在base.css中寫
復合選擇器
交集選擇器
? ? ? ? ? 語法：選擇器1選擇器2選擇器3{}? ? 例：boxtexttop{}
中間沒有空格，指選中同時含有這么多選擇器的元素，類比數學中的交集
并集選擇器
? ? ? ? ? 語法：選擇器1,選擇器2,選擇器3···{}? 例：box，text，top{}
中間逗號分開，指含有這些選擇器的所有元素，類比數學中的并集
關系選擇器
父子選擇器?
語法：父元素>子元素{}? ?例：a>b{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?a{? ?b{}??? ? }
指元素和下一級元素，用>連接
后代選擇器
語法：祖先元素 后代元素{}? ? ? 例：a b{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a{ c{? b{} } }
指隔了不止一代的元素，用空格連接
兄弟選擇器
下一個兄弟選擇器
語法：兄+弟{}? ? ? ?例：a+b{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a{}b{}
指選擇緊貼的下一個兄弟，用+連接
后面兄弟選擇器
語法：兄~弟{}? ? ? ?例：a~b{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a{}b{}b{}b{}b{}
指選擇后面所有的此類兄弟，用~連接
元素之間的關系
? ? ? 父子關系 ? ?直接包含與被包含的兩者之間關系
? ? ? 祖先后代關系 ?直接或間接包含與被包含的兩者間關系
? ? ? 兄弟關系 ? 擁有共同的父元素
屬性選擇器
? ? ? ? ? ? 語法：[屬性名]{} 選擇含有指定屬性的元素? ?例：[id]{color: red;}
? ? ? ? ? ? ? ? ?[屬性名=屬性值]{} 選擇含有指定屬性和屬性值的元素? ??例：[id=a]{color: red;}
? ? ? ? ? ? ? ? ?[屬性名^=屬性值]{} 選擇屬性值以指定值開頭的元素? ? ? 例：[id^=a]{color: red;}?
? ? ? ? ? ? ? ? ?[屬性名$=屬性值]{} 選擇屬性值以指定值結尾的元素? ? ? 例：[id$=a]{color: red;}
? ? ? ? ? ? ? ? ?[屬性名*=屬性值]{} 選擇屬性值含有某值的元素? ? ??例：[id*=a]{color: red;}
適用于篩選特定元素
偽類選擇器
一 、偽類（不存在的類，特殊的類）
? ? ? ? ? -偽類用來描述一個元素的特殊狀態
? ? ? ? ? -比如：第一個元素，被點擊的元素，鼠標移入的元素···
? ? ? ? ? -特點：一般請情況下，使用：開頭
? ? ? ? ? ? ?1、 :first-child ?第一個子元素
? ? ? ? ? ? ?2、 :last-child ? 最后一個子元素
? ? ? ? ? ? ?3、 :nth-child() ?選中第n個子元素
? ? ? ? ? ? ? ? ? ?特殊值： n ? ?所有的
? ? ? ? ? ? ? ? ? ? ? ? ? 2n或even ?選中偶數
? ? ? ? ? ? ? ? ? ? ? ? ? 2n+1或odd ?選中奇數
? ? ? ? ? —以上這些偽類都是根據所有的子元素進行排序
注意：指的是在所有中去選，當第一個元素不是想要的元素時則選不中
? ? ? ? ? ? ?1、:first-of-type ?第一個子元素
? ? ? ? ? ? ?2、:last-of-type ? ?最后一個子元素
? ? ? ? ? ? ?3、:nth-of-type() ?選中第n個子元素
? ? ? ? ? ? ? ? ? 功能跟上面相似，
? ? ? ? ? ? ? 不同的是，這是在同類型的子元素中去選擇
指的是在所有同類型元素中去選，不會選不中
二、:not() 否定偽類
? ? ? ? ? ?-將符合條件的元素從選擇器中去除? ? 例：?li:not(.l1){color: red;}?
a元素的偽類選擇器
即是鼠標懸停，點擊，松開，移走的狀態
1、:link ?用來表示未訪問過的鏈接（正常鏈接）
例? ? a:link {
? ? ? ? color: red;
2、:visited 用來表示訪問過的鏈接
? ? ? ? ? ? ? ?由于隱私的原因，所以visited只能改顏色
例? ? a:visited {
? ? ? ? color: grey;
? ? ? }
注意:link與:visited只能a標簽使用，而:hover與:active其他標簽也可以
3、:hover 用來表示鼠標移入的狀態
例? ? a:hover {
? ? ? ? background-color: pink;
4、:active ?鼠標點擊后的狀態
例? ?a:active{
? ? ? ? background-color: indigo;
? ? ? }
偽元素選擇器
偽元素，表示頁面中一些特殊的并不真實存在的元素（元素的位置）
? ? ? ? ? ::first-letter ?表示第一個字母
? ? ? ? ? ::first-line ?表示第一行
? ? ? ? ? ::selection ?選中的內容
? ? ? ? ? ::before ?元素的開始位置
? ? ? ? ? ::after ? 元素的結束位置
? ? ? ? ? ? ? ?before和after必須要結合content使用
例? ? ?
div::first-letter{color: red;}
? ? ? ? p::first-line{
? ? ? ? ? background-color: #eee;
? ? ? ? }
注意：偽元素選擇器只適用于塊元素
?
樣式的繼承（繼承祖先的資產）
? ? ? ? ? ? 定義：為一個元素設置的樣式，同時也會應用到它的后代元素上
? ? ? ? ? ? 優勢：方便我們開發，講一些通用的樣式統一設置到共同的祖先元素上，子元素的樣式都可以獲取到樣式
? ? ? ? ? ? 注意：并不是所有的樣式都會被繼承，比如：背景相關的，布局相關等不會被繼承
span 的背景色是透明的，你給p設置了背景色，給p設置，透出來，就是這個色了
? ? ? ? ? ? 背景圖片等，也都不會被繼承
選擇器權重
? ? ? ? ? ?內聯樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1000 ?
? ? ? ? ? ?id選擇器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 100
? ? ? ? ? ?類和偽類選擇器/屬性選擇器? ? ? ? ? ? ? ? ? ? 10
? ? ? ? ? ?元素選擇器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1
? ? ? ? ? ?通配符、子選擇器、相鄰選擇器等。如*、>、+ ? ? 0000
? ? ? ? ? ?繼承的樣式 ? ? ?沒有優先級
? ? ? ? ? ?!important ? ?最高優先級
? ? ? ? 注意：
? ? ? ? ? ? 比較優先級時，需要將所有選擇器的優先級進行相加計算，最后優先級越高，則優先顯示
? ? ? ? ? ? (并集選擇器)分組選擇器是單獨計算的
? ? ? ? ? ? 如果優先級計算后相同，此時則優先使用靠下的樣式
? ? ? ? ? ? 選擇器的累加，不會超過上一級數量級，例如：類選擇器再高也不會超過id選擇器 ?量變達不到質變
? ? ? ? ? ? 一般來說：選擇器越具體，優先級越高
? ? ? ? ? ? 當你不知道是不是權重的問題時，可以在后面加一個!important來檢查
? ? ? ? ? ? 但是!important ?慎用 ?
最后一個快捷鍵小技巧
jw+n：快速寫n個漢字
總結
以上是生活随笔為你收集整理的前端剑法第二式————淬焰的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： github章鱼猫
- 下一篇： 前端剑法第四式————御风