CSS 选择器初学者速成班

CSS 选择器是 CSS 规则的第一个。它是一种元素和其他术语的模式，告诉浏览器应选择哪些 HTML 元素以将规则中的 CSS 属性值应用于它们。

或“CSS 选择器用于“查找”（或选择）您想要设置样式的 HTML 元素。

通用选择器：选择 DOM 的所有元素并使它们的边距和填充为 0px。

* {
    margin: 0; 
    padding: 0;
}

类型选择器：选择具有给定节点名称的所有元素。语法 -> elementName。

a {
    text-decoration: none;
}

在上面，匹配任何“a”标签并删除下划线或任何文本装饰。

类选择器：选择所有具有给定 classas 属性的元素。语法 -> .className。

.intro {
    color: blue;
}

上面，.intro将匹配任何具有“介绍”类的元素并将其文本颜色更改为蓝色。

ID 选择器：根据其 id 属性的值选择一个元素。在文档中应该只有一个具有给定 ID 的元素。语法 -> #IdName。

#firstName {
    color: red;
    font-size: 20px;
}

上面，#firstName将匹配一个 id 为“firstName”的元素并应用这些样式。

属性选择器：选择具有给定属性的所有元素。句法：[attr][attr=value]

[title] {
    font-weight: bold;
}

[attr=value]：这表示属性名称为 attr 的元素，其值恰好为 value。
[attr~=value]: 表示属性名称为 attr 的元素，其值为以空格分隔的单词列表，其中一个是精确值。

[attr^=value]: 表示属性名称为 attr 的元素，其值以值作为前缀（前面）。

[attr$=value]: 表示属性名称为 attr 的元素，其值以值作为后缀（后跟）。

[attr*=value]：表示具有属性名称 attr 的元素，其值在字符串中至少包含一次 value。

Selector list :,是一种分组方法，它选择所有匹配的节点。

p, .start {
    font-weight: bold;
}

上面，p.intro 将同时匹配

和

元素。

子组合器：>组合器选择作为第一个元素的直接子节点的节点。

.intro > img {
    width: 50%;
}

在上面，它将匹配直接嵌套在

元素内的所有元素。

General sibling combinator：~组合器选择兄弟姐妹。这意味着第二个元素跟在第一个元素之后（虽然不一定立即），并且两者共享同一个父元素。
示例：p~span将匹配a 之后的所有元素

，无论是否立即匹配。

相邻兄弟组合器：+组合器选择相邻兄弟。这意味着第二个元素直接跟在第一个元素之后，并且共享同一个父元素。
示例：h2 + p将匹配

直接跟在

.

后代组合器：（空间）组合器选择第一个元素的后代节点。
示例：div span将匹配元素内的所有元素

。

如果你喜欢我的文章，记得关注获取更多的信息。感谢您的阅读，祝您有美好的一天！