整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：陳大魚頭
轉發鏈接：https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ
文介紹了如何在網頁中使用css及css的常用知識點，今天首先介紹css 的選擇器，所謂選擇器就是通過一定的規則語法查找html元素節點，只有找到這些元素才能應用樣式。
css 選擇器從不精確到最精確，可分以下幾種：
tag 是html 標簽關鍵字，一般小寫。
在html標簽上使用 class="" 屬性應用css 樣式，可以寫多個class，空格隔開，如：<p class="cls1 cls2">。
屬性值html標簽上的各種屬性，如 [alt], [type="text"], [lang="en"]。
id 必需是唯一的，不能重復。
語法如下：
* {
/* 通用選擇器*/
}
tag {
/* 標簽選擇器 */
}
tag::before {
/* 標簽選擇器和偽元素 */
}
.class {
/* 類選擇器 */
}
.class:hover {
/* 類選擇器和偽類 */
}
[attr] {
/* 屬性選擇器 */
}
#id {
/* ID 選擇器 */
}偽元素有兩個冒號 ( ::, 比如 ::before)，偽類有一個冒號 ( :, 比如 :hover)。
后面學習JavaScript 時，會學習到通過js也可以查找html元素，查找規則就是通過css 選擇器查找，如下示例：
此查詢用于獲取與選擇器匹配的所有元素：
document.querySelectorAll('article h2')如上代碼獲取到一個html 節點集合，每個html節點都有子節點，孫子節點，依次類推.....
在網頁中 html 是一個樹狀的結構，每個html 元素是一個節點，且每個節點下面又有子節點。
如下圖：
css 選擇器就是在這樣的一個樹結構里面查找html元素節點，找到后瀏覽器渲染對應的樣式。
選擇器除了可以單個使用，也可以組合使用，比如 #id p, #id >.class,p+h3等，按功能可分以下幾種：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
<p>黑色<span>紅色</span><span>紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div > span{
color:red;
}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
黑色<span>紅色</span><span>紅色</span>
<p><span>不是紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p + span{
color:red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>紅色</span>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>顯示效果：
這里一定注意span必須緊跟在p標簽后面，它們2個之間有任何標簽都不會起作用了。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p~span{
color: red;
}
</style>
</head>
<body>
<p>黑色</p>
<span>紅色</span><br>
<span>紅色</span><br>
<h1>標題</h1>
<span>紅色</span>
</body>
</html>顯示效果：
如下示例：
h1,h2,h3{
background-color: red;
}整個頁面中的h1、h2、h3的背景色都是紅色，無論在哪個層次的節點中都會起作用。
不同的選擇器如果作用于同一個html元素，瀏覽器會根據優先級規則渲染樣式。
優先級高的選擇器會覆蓋優先級低的樣式，如下表從上到下優先級依次變高：
選擇器 | 例子 | 級別 |
標簽選擇器 | h1 | 1 |
類，屬性選擇器 | .class, [type="text"] | 2 |
ID選擇器 | #contact | 3 |
內聯樣式 | <div style="background: purple"> | 4 |
!important關鍵詞 | div { color: green !important } | 覆蓋所有 |
請謹慎地使用!important，它變得非常難以維護。!important 僅在絕對必要時才應使用，例如為某些您無法控制的第三方設置樣式，使用內聯樣式，以及在少數情況下使用 JavaScript 切換顯示。
css 選擇器是一種查詢html元素節點的語言，當css選擇器互相組合時，會變得很復雜，所以平時盡量減少使用組合選擇器。
關于優先級，總而言之，從標簽選擇器到!important的每層級別都比前一個級別強一個數量級。
學習css，切記死記硬背，理解它很重要，結合之前學習的html 知識多練習，感謝關注。
上篇：前端入門——css 樣式表簡介
一篇文章我們把「Web前端開發進階篇」CSS定位和浮動講解完了，接著我們來講解下一篇文章，關于CSS選擇器的內容知識，小伙伴們跟上我的節奏，動起來，Let's go！
【引言】
在學習CSS的過程中，選擇器的便捷使用會讓你在開發的過程中游刃有余，節省大量js代碼的同時，讓你的CSS代碼變得精簡，頁面靈活度也會提高很多。
在CSS中，選擇器是一種模式，就是選擇你想添加樣式的元素。選擇器的類型居多，需要熟練使用才能讓頁面更加靈活，兼容性才不會出現很大的差異。
接下來讓我詳細的給大家介紹一下。
這是最常見的CSS元素選擇器，就是拿文檔的元素來作為最基本的選擇器，說白了就是拿HTML標簽來做選擇器。例如：
元素選擇器
如上圖所示，我們直接拿文檔的元素作為選擇器來添加我們想要的樣式。
使用類型選擇器來匹配語言元素類型的名稱，它會匹配文檔樹中該元素類型的每一個實例，說白了就是給文檔樹下選擇的每一個元素添加一個統一的樣式。不管是XML文檔還是CSS文檔都可以使用類型選擇器來添加樣式。例如：
XML文檔
CSS文檔
如上圖所示，我們直接選擇給某一個類型的語言元素來添加我們想要的樣式。
假設我們對不同的文檔元素添加同一樣式，要想達到這個目的，我們就可以用選擇器分組來實現這個目的。例如：
選擇器分組
我們可以將眾多的選擇器用逗號分開，就定義了一個規則，可以將任意多個選擇器分組在一起，對此沒有任何的限制，省去了大量的代碼，也方便管理。就不用像下面這么寫了。
沒有進行選擇器分組
1、通配型選擇器
這是選擇器分組里面的一種選擇器 - 通配選擇器，顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像一個通配符。例如：
id*{margin:0；padding:0；}2、聲明分組
我們既可以對選擇器進行分組，也可以對聲明分組。說白了就是給選擇器分開來寫添加不一樣的樣式而已。就是說我給h1添加個字體顏色，在別的地方我給它添加個字體大小，這樣有利于管理，在實際開發中用的也比較多。但是效率不高。我們將采用結合選擇器和聲明的分組的寫法來寫CSS，例如：
結合選擇器和聲明的分組
類選擇器允許以一種獨立于文檔元素的方式來指定樣式，可以單獨適應，也可以結合其他元素結合使用。注意：只有適當地標記文檔后，才可以使用這些選擇器，這是最常用的，說白了就是只有給文檔添加class才可以使用類選擇器。
為了將類選擇器的樣式與元素關聯，必須為Class制定一個適當的值，就是添加一個class。然后用class來指定樣式。
可以為不同的元素指定同一個Class。然后通過選擇器來添加樣式，例如：
CSS類選擇器
1、CSS多類選擇器
就是說Class值里有多個Class值，我們用空格分開，用不同的值指定不同的樣式。
注意：里面的值不分順序。如果把兩個類選擇器連接在一起，僅可以選擇同時包含這些類名的元素（順序也不限）。例如：
CSS多類選擇器
ID選擇器跟類選擇器差不多，就是給元素添加相應的ID才可以使用ID選擇器，類選擇器是引用Class值進行綁定添加樣式，ID選擇器是通過引用ID值進行綁定添加樣式。例如：
ID選擇器
1、與類選擇器不同，需要區別注意：
區別1：ID只能在一個HTML文檔中使用一次，ID選擇器也會使用一次，而且僅一次。
區別2：不能使用ID詞列表，就是說id="只能一個值"，不允許有以空格分割的詞列表。
區別3：ID能包含更多含義，就是說能對不同文檔中的同一個ID進行元素匹配。相當于給所有的文檔定義一個ID選擇器，給他們添加樣式。
2、區分大小
類選擇器和 ID 選擇器可能是區分大小寫的。這取決于文檔的語言。HTML 和 XHTML 將類和 ID 值定義為區分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應值匹配。
屬性選擇器可以根據元素的屬性值來選擇元素。比如圖片的title屬性，a標簽的href，也可以是同時有title和href的拆鏈接，都可以用屬性選擇器添加樣式。例如：
根據元素的屬性值來選擇元素
1、根據具體屬性值選擇
你也可以縮小選擇范圍，選擇特定屬性值的元素。可以是一個屬性值也可以是多個特定的屬性。可以是標簽屬性，也可以是XML文檔的語言屬性，更可以是元素的屬性值，例如：
根據具體屬性值選擇
2、根據部分屬性值
就像正則表達式一樣，可以匹配相似的元素，比如說匹配屬性值中的詞列表的某個詞，使用（~）號就可以匹配到，說白了，就是在眾多的屬性值中選擇一個，然后進行匹配。
根據部分屬性值
3、子串匹配屬性選擇器
這個更像正則表達式一樣，去匹配我們相匹配的元素。
子串匹配屬性選擇器
例如：如果希望對指向百度的所有鏈接應用樣式，不必為所有這些鏈接指定 class，再根據這個類編寫樣式，而只需這樣寫：
a[href*="w3school.com.cn"] {color: red;}4、特定屬性選擇類型
我們可以用特定屬性選擇類型來匹配語言值。例如：
特定屬性選擇類型
在比如說你在文檔中插入了一系列圖片，其中圖片的命名形如：picture-1、picture-2等等，就可以像這樣進行匹配了，
[attribute|=value]
總結一下屬性選擇器：靈活多運，用多了才不會出錯。
屬性選擇器
簡單說后代選擇器可以選擇作為某元素后代的元素。就是拿文檔元素的層級關系作為選擇器來添加樣式，比如說，我先找div屬性為Class值為important的元素，在找到它下面的h1元素，給他添加樣式，例如：
后代選擇器
后代選擇器功能強大，也是最常用的，也是最簡單易用的，實現了很多選擇器不能實現的任務。
如果你不希望選擇任意的后代元素，只是某個元素的子元素，就可以使用它，如果有多個相同子元素，都能匹配到父元素里相同的子元素。我們通常用（>）大于號來表示。注意符號的兩邊允許有空格。例如：
選擇作為 h1 元素子元素的所有 strong 元素：
子元素選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素。就可以使用相鄰兄弟選擇器，還可以結合其他結合符，例如：
相鄰兄弟選擇器
CSS 偽類用于向某些選擇器添加特殊的效果。
1、錨偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。例如：
錨偽類
2、:first-child偽類
2.1 可以使用 :first-child 偽類來選擇元素的第一個子元素。
2.2 可以使用 :nth-child(n) 偽類來選擇元素的第n個子元素。n也可以作為表達式，例如：n+1、2n、等數學表達式
2.3 可以使用 :first-of-type 偽類來選擇元素的第一個子元素。（CSS3選擇器，等同2.1）
2.4 可以使用 :nth-of-type(n) 偽類來選擇元素的第n個子元素。n也可以作為表達式，例如：n+1、2n、等數學表達式，（CSS3選擇器，等同2.2）
3、:lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規則。
例如：
偽類
CSS 偽元素用于向某些選擇器設置特殊效果。
1、:first-line 偽元素：用于向文本的首行設置特殊樣式
2、:first-letter 偽元素：用于向文本的首字母設置特殊樣式：
3、多重偽元素：可以結合多個偽元素來使用。
4、:before 偽元素：可以在元素的內容前面插入新內容。
5、:after 偽元素：可以在元素的內容之后插入新內容。
例如：
CSS 偽元素
CSS選擇器靈活多運，用法也是相當的多，可以使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制。多多使用練習，在開發中效率會提高不少，這也是前端開發必備的技能。
CSS選擇器今天就講解到這里了，下一篇講解CSS高級語法，希望大家不要放棄學習哦！
PS：
本文為‘Web前端進階指南’原創，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
