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 屬性設置唯一的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)} |
◦通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。
◦由于給每個元素應用同樣的規(guī)則幾乎沒有什么實際價值，更常見的做法是與其他選擇器結合使用
◦屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個或多個元素，屬性選擇器是一種特殊類型的選擇器，它根據(jù)元素的屬性和屬性值來匹配元素。它們的通用語法由方括號 ([]) 組成，其中包含屬性名稱，后跟可選條件以匹配屬性的值。 屬性選擇器可以根據(jù)其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。 ◦存在和值（Presence and value）屬性選擇器
新聞熱點
疑難解答
