1. 選擇器簡介
◦【MDN】https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors
2. 選擇器
◦簡單選擇器（Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素，之所以這么稱呼它是因為它們基于元素的類型（或其 class或 id）直接匹配文檔的一個或多個元素。 ◦類型選擇器（又名元素選擇器）
<p> What color do you like?</p><div> I like blue.</div>/* All p elements are red */p { color: red;}/* All div elements are blue */div { color: blue;}◦此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇所有指定類型的最簡單方式
◦類選擇器
<ul> <li class="first done">Create an HTML document</li> <li class="second done">Create a CSS style sheet</li> <li class="third">Link them all together</li></ul>/* The element with the class "first" is bolded */.first { font-weight: bold;}/* All the elements with the class "done" are strike through */.done { text-decoration: line-through;}◦類選擇器由一個點“.”以及類后面的類名組成。類名是在 HTML class 文檔元素屬性中沒有空格的任何值
◦文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)
◦ID 選擇器
<p id="polite"> Good morning</p><p id="rude"> Go away</p>#polite { font-family: cursive;}#rude { font-family: monospace; text-transform: uppercase;}◦ID選擇器由哈希/磅符號 (#)組成，后面是給定元素的ID名稱
◦任何元素都可以使用 id 屬性設置唯一的ID名稱。 這是選擇單個元素的最有效的方式
◦通用選擇器
<div> <p>I think the containing box just needed a <strong>border</strong> or <em>something</em>, but this is getting <strong>out of hand</strong>!</p></div>* { padding: 5px; border: 1px solid black; background: rgba(255,0,0,0.25)}◦通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。
◦由于給每個元素應用同樣的規則幾乎沒有什么實際價值，更常見的做法是與其他選擇器結合使用
◦屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個或多個元素，屬性選擇器是一種特殊類型的選擇器，它根據元素的屬性和屬性值來匹配元素。它們的通用語法由方括號 ([]) 組成，其中包含屬性名稱，后跟可選條件以匹配屬性的值。 屬性選擇器可以根據其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。 ◦存在和值（Presence and value）屬性選擇器
我的食譜配料: <i lang="fr-FR">Poulet basquaise</i>
<ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li></ul>/* 所有具有"data-vegetable"屬性的元素將被應用綠色的文本顏色 */[data-vegetable] { color: green}/* 所有具有"data-vegetable"屬性且屬性值剛好為"liquid"的元素將被應用金色的背景顏色 */[data-vegetable="liquid"] { background-color: goldenrod;}/* 所有具有"data-vegetable"屬性且屬性值包含"spicy"的元素，即使元素的屬性中還包含其他屬性值，都會被應用紅色的文本顏色 */[data-vegetable~="spicy"] { color: red;}◦[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何
◦[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素
◦[attr~=val]：該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個
◦子串值（Substring value）屬性選擇器
我的食譜配料: <i lang="fr-FR">Poulet basquaise</i>
<ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li></ul>/* 語言選擇的經典用法 */[lang|="fr"] { font-weight: bold;}/* 具有"data-vegetable"屬性含有值"not spicy"的所有元素,都變回綠色 */[data-vegetable*="not spicy"] { color: green;}/* 具有"data-quantity"屬性其值以"kg"結尾的所有元素 */[data-quantity$="kg"] { font-weight: bold;}/* 具有屬性"data-quantity"其值以"optional"開頭的所有元素 */[data-quantity^="optional"] { opacity: 0.5;}
◦[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意，這里的 “-” 不是一個錯誤，這是用來處理語言編碼的）
◦[attr^=val] : 選擇attr屬性的值以 val 開頭（包括 val）的元素
◦[attr$=val] : 選擇attr屬性的值以 val 結尾（包括 val）的元素
◦[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素（一個子字符串就是一個字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）
◦偽類（Pseudo-classes）：匹配處于確定狀態的一個或多個元素，比如被鼠標指針懸停的元素，或當前被選中或未選中的復選框，或元素是DOM樹中一父節點的第一個子節點。該選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素 ◦偽類（Pseudo-class）選擇器
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
/* 這些樣式將在任何情況下應用于我們的鏈接 */a { color: blue; font-weight: bold;}/* 我們想讓被訪問過的鏈接和未被訪問的鏈接看起來一樣 */a:visited { color: blue;}/* 當光標懸停于鏈接，鍵盤激活或鎖定鏈接時，我們讓鏈接呈現高亮 */a:hover,a:active,a:focus { color: darkred; text-decoration: none;}◦一個 CSS 偽類（pseudo-class）是一個以冒號(:)作為前綴，被添加到一個選擇器末尾的關鍵字，當你希望樣式在特定狀態下才被呈現到指定的元素時，你可以往元素的選擇器后面加上對應的偽類（pseudo-class）。
◦偽元素（Pseudo-elements）:匹配處于相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。該選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素 ◦偽元素選擇器
<ul> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li></ul>/* 所有含有"href"屬性并且值以"http"開始的元素，將會在其內容后增加一個箭頭（去表明它是外部鏈接）*/[href^=http]::after { content: '⤴';}◦偽元素（Pseudo-element）跟偽類很像，但它們又有不同的地方。它們都是關鍵字，但這次偽元素前綴是兩個冒號 (::) ， 同樣是添加到選擇器后面去選擇某個元素的某個部分
◦組合器（Combinators）：這里不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法。 ◦
◦多重選擇器（Multiple selectors）：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面， 以將一組聲明應用于由這些選擇器選擇的所有元素
總結
以上所述是小編給大家介紹的CSS 選擇器 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
