一篇文章帶你了解CSS 選擇器
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
CSS選擇器是一種用于匹配HTML文檔中元素的模式。關(guān)聯(lián)的樣式規(guī)則將應(yīng)用于與選擇器模式匹配的元素。
一、什么是選擇器？
選擇器是CSS最重要的方面之一，因?yàn)樗鼈冇糜谶x擇網(wǎng)頁(yè)上的元素，以便可以設(shè)置樣式。可以通過(guò)多種方式定義選擇器。
二、通用選擇器
通用選擇器（用 * 星號(hào)或星號(hào)表示）與頁(yè)面上的每個(gè)單個(gè)元素匹配。如果目標(biāo)元素上存在其他條件，則可以省略通用選擇器。此選擇器通常用于從元素中刪除默認(rèn)的邊距和填充，以進(jìn)行快速測(cè)試。
例：
<html><head><meta charset="utf-8"><title>CSS通用選擇器例：</title><style>* {margin: 0;padding: 0;}</style></head><body style="background-color: aqua;"><h1>This is heading</h1><p>This is a paragraph.</p></body></html>
*選擇器內(nèi)的樣式規(guī)則將應(yīng)用于文檔中的每個(gè)元素。
注意：
不建議* 在生產(chǎn)環(huán)境中使用通用選擇器，因?yàn)榇诉x擇器會(huì)匹配頁(yè)面上的每個(gè)元素，這會(huì)對(duì)瀏覽器造成不必要的壓力。
三、元素類(lèi)型選擇器
元素類(lèi)型選擇器將文檔樹(shù)中元素的每個(gè)例：與相應(yīng)的元素類(lèi)型名稱(chēng)進(jìn)行匹配。
例：
<style>h1 {color: red;}p {color: blue;}</style>
p選擇器中的樣式規(guī)則將應(yīng)用于<p>文檔中的每個(gè)元素，并使其顏色為藍(lán)色，無(wú)論它們?cè)谖臋n樹(shù)中的位置如何。
1. ID選擇器
id選擇器用于為單個(gè)或唯一元素定義樣式規(guī)則，ID選擇器的定義是一個(gè)井號(hào)（#），后跟ID值。
例：
<style>#error {color: #ff0000;}</style>
此樣式規(guī)則將id屬性設(shè)置為的元素文本呈現(xiàn)為紅色error。
2. class類(lèi)選擇器
類(lèi)選擇器可用于選擇具有class屬性的任何HTML元素。具有該類(lèi)的所有元素將根據(jù)定義的規(guī)則進(jìn)行格式化。
用一個(gè)句號(hào)（.）緊隨其后的類(lèi)值定義類(lèi)選擇器。
例：
<style>.blue {color: #0000ff;}</style>
以上樣式規(guī)則將 class 屬性中設(shè)置為的文檔中每個(gè)元素的文本顯示為藍(lán)色blue。可以使其更加具體。
例：
p.blue {color: blue;}
選擇器中的樣式規(guī)則p.blue僅<p>將class屬性設(shè)置為的那些元素呈現(xiàn)為藍(lán)色blue，而對(duì)其他段落沒(méi)有影響。
2.1 后代選擇器
當(dāng)需要選擇一個(gè)元素是另一個(gè)元素的后代時(shí)，可以使用這些選擇器。例如，如果只想定位無(wú)序列表中包含的那些定位點(diǎn)，而不要定位所有定位點(diǎn)元素。
例：
<style>h1 em {color: green;}ul.menu {padding: 0;list-style: none;}ul.menu li {display: inline;}ul.menu li a {margin: 10px;text-decoration: none;}</style>
注：
選擇器內(nèi)的樣式規(guī)則ul.menu li a僅適用于包含在具有class 的無(wú)序列表內(nèi)的那些即錨元素.menu，并且對(duì)文檔內(nèi)的其他鏈接沒(méi)有影響。
同樣，h1 em 選擇器內(nèi)的樣式規(guī)則僅適用于heading內(nèi)包含的元素。
2.2 子選擇器
子選擇器只能用于選擇作為某些元素的直接子元素的那些元素。子選擇器由兩個(gè)或多個(gè)選擇器組成，兩個(gè)選擇器之間用大于號(hào)（即>）隔開(kāi)。例如，可以使用這些選擇器在具有多個(gè)級(jí)別的嵌套列表中選擇列表元素的第一級(jí)。
例：
<style>ul > li {list-style: square;}ul > li ol {list-style: none;}</style>
選擇器內(nèi)的樣式規(guī)則ul > li僅適用于<li>作為<ul>元素直接子元素的那些元素，并且對(duì)其他列表元素沒(méi)有影響。
2.3 分組選擇器
樣式表中的多個(gè)選擇器通常共享相同的樣式規(guī)則聲明。可以將它們分組為一個(gè)逗號(hào)分隔的列表，以最大程度地減少樣式表中的代碼。它還可以防止一遍又一遍地重復(fù)相同的樣式規(guī)則。
例：
h1 {font-size: 36px;font-weight: normal;}h2 {font-size: 28px;font-weight: normal;}h3 {font-size: 22px;font-weight: normal;}
可以在上面的例：中看到，相同的樣式規(guī)則font-weight: normal; 是由選擇共享h1，h2和h3。
因此，可以將其分為逗號(hào)分隔的列表。
例：
<style>h1,h2,h3 {font-weight: normal;}h1 {font-size: 36px;}h2 {font-size: 28px;}h3 {font-size: 22px;}</style>
四、總結(jié)
本文基于HTML基礎(chǔ)，介紹了有關(guān)CSS選擇器，常規(guī)的通用樣式選擇器 *，元素選擇器id，class屬性，class屬性中后代選擇器，子選擇器，分類(lèi)選擇器。通過(guò)案例分析，豐富的效果展示。能夠讓讀者更好的理解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行