深入理解CSS 选择器

前端  /  管理员 发布于 7年前   402

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 选择器 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！