深入理解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元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式

◦类选择器

<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 的值为何

深入理解CSS 选择器

扫一扫手机访问