深入理解CSS 选择器

小诸哥 2022-06-23 21:55:25 0

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&lt;/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&quot;开头的所有元素 */
[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: '⤴';
}