深入理解CSS 選擇器
我要評論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元素名的不區(qū)分大小寫的匹配。這是選擇所有指定類型的最簡單方式
◦類選擇器
<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 屬性設(shè)置唯一的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)
}
◦通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。
◦由于給每個元素應(yīng)用同樣的規(guī)則幾乎沒有什么實際價值，更常見的做法是與其他選擇器結(jié)合使用
◦屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個或多個元素，屬性選擇器是一種特殊類型的選擇器，它根據(jù)元素的屬性和屬性值來匹配元素。它們的通用語法由方括號 ([]) 組成，其中包含屬性名稱，后跟可選條件以匹配屬性的值。 屬性選擇器可以根據(jù)其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。 ◦存在和值（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"屬性的元素將被應(yīng)用綠色的文本顏色 */
[data-vegetable] {
color: green
}
/* 所有具有"data-vegetable"屬性且屬性值剛好為"liquid"的元素將被應(yīng)用金色的背景顏色 */
[data-vegetable="liquid"] {
background-color: goldenrod;
}
/* 所有具有"data-vegetable"屬性且屬性值包含"spicy"的元素，即使元素的屬性中還包含其他屬性值，都會被應(yīng)用紅色的文本顏色 */
[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>
/* 語言選擇的經(jīng)典用法 */
[lang|="fr"] {
font-weight: bold;
}
/* 具有"data-vegetable"屬性含有值"not spicy"的所有元素,都變回綠色 */
[data-vegetable*="not spicy"] {
color: green;
}
/* 具有"data-quantity"屬性其值以"kg"結(jié)尾的所有元素 */
[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 結(jié)尾（包括 val）的元素
◦[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素（一個子字符串就是一個字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）
◦偽類（Pseudo-classes）：匹配處于確定狀態(tài)的一個或多個元素，比如被鼠標(biāo)指針懸停的元素，或當(dāng)前被選中或未選中的復(fù)選框，或元素是DOM樹中一父節(jié)點的第一個子節(jié)點。該選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素 ◦偽類（Pseudo-class）選擇器
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
/* 這些樣式將在任何情況下應(yīng)用于我們的鏈接 */
a {
color: blue;
font-weight: bold;
}
/* 我們想讓被訪問過的鏈接和未被訪問的鏈接看起來一樣 */
a:visited {
color: blue;
}
/* 當(dāng)光標(biāo)懸停于鏈接，鍵盤激活或鎖定鏈接時，我們讓鏈接呈現(xiàn)高亮 */
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}
◦一個 CSS 偽類（pseudo-class）是一個以冒號(:)作為前綴，被添加到一個選擇器末尾的關(guān)鍵字，當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時，你可以往元素的選擇器后面加上對應(yīng)的偽類（pseudo-class）。
◦偽元素（Pseudo-elements）:匹配處于相關(guān)的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內(nèi)容。該選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素 ◦偽元素選擇器
<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"開始的元素，將會在其內(nèi)容后增加一個箭頭（去表明它是外部鏈接）*/
[href^=http]::after {
content: '⤴';
}
◦偽元素（Pseudo-element）跟偽類很像，但它們又有不同的地方。它們都是關(guān)鍵字，但這次偽元素前綴是兩個冒號 (::) ， 同樣是添加到選擇器后面去選擇某個元素的某個部分
◦組合器（Combinators）：這里不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法。 ◦
◦多重選擇器（Multiple selectors）：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規(guī)則下面， 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素
總結(jié)
以上所述是小編給大家介紹的CSS 選擇器 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了CSS3 新增選擇器的實例,需要的朋友可以參考下2019-11-13
如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ)，本文介紹了css3 偽類選擇器快速復(fù)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工2019-09-10- 這篇文章主要介紹了CSS 樣式的使用方式、選擇器 的相關(guān)資料,需要的朋友可以參考下2019-08-12
CSS 選擇器在實踐中是非常常用的，無論是在寫樣式上或是在 JS 中選擇 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作組繼續(xù)為選擇器標(biāo)準(zhǔn)添加了更豐富的選擇器。需2018-12-24- 這篇文章主要介紹了css選擇器設(shè)置標(biāo)簽樣式的實例代碼,需要的朋友可以參考下2018-11-22
- CSS屬性選擇器非常神奇，它們可以幫你避免添加數(shù)不勝數(shù)的類名，從另一方面來指出你代碼里的一些問題。接下來通過本文給大家介紹使用CSS屬性選擇器來拼接HTML的DNA的方法，2018-11-02
- 這篇文章主要介紹了css復(fù)雜選擇器及css字體樣式、顏色屬性，復(fù)雜選擇有三種，每種方法通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2020-01-19
