在本文中，我们将讨论 CSS3 选择器，对于每个想要在更少编写的情况下做更多事情的人来说，这是一个非常强大的工具。无论您是刚刚开始还是在提高技能，本指南都会引导您从基础知识到高级内容。
准备好提升你的 CSS 技能了吗？让我们开始吧！
选择器是我们用来从 HTML 树中挑选某些元素的工具。顾名思义，基本 CSS3 选择器是每个开发人员工具包中都应该拥有的基本选择器。它们包括 Type 、 Class 、 ID 、 Universal 和 Attribute 选择器。让我们更深入地研究其中的每一个。
这些选择器根据 HTML 元素的标签名称来定位它们。例如，p { 颜色：蓝色； } 会将所有段落元素设置为蓝色。
这些选择器根据 HTML 元素的类属性来定位 HTML 元素。例如，.alert { color: red; } 会将所有“alert”类的元素设置为红色。
这些选择器针对具有特定 id 属性的唯一元素。例如，#navbar { 背景颜色：黑色； } 将为 id 为“navbar”的元素设置黑色背景的样式。
这些选择器针对页面上的所有元素。例如，* { 边距：0; } 将删除页面上所有元素的边距。
这些选择器根据元素的属性和值来定位元素。例如，a[href="https://google.com"] { color: blue; } 会将所有指向 Google 的链接设置为蓝色。
类型选择器 : h1 { color: green; } 会将所有 h1 标题设置为绿色。
类型选择器 : p { font-size: 16px; } 将选择所有段落元素 (
) 并将其字体大小设置为 16 像素。
类选择器 : .info { font-size: 18px; } 会将所有“info”类元素的字体大小设置为 18px。
类选择器 : .highlight { 背景颜色: 黄色; } 将选择所有具有“highlight”类的元素并将其背景颜色设置为黄色。
ID 选择器 : #footer { padding: 20px; } 将为 id 为“footer”的元素添加 20px 的内边距。
ID 选择器 : #header { height: 60px; } 将选择 ID 为“header”的元素并将其高度设置为 60 像素。
通用选择器 : * { font-family: Arial, sans-serif; } 会将所有元素的字体设置为 Arial。
通用选择器 : * { box-sizing: border-box; } 将选择页面上的所有元素，并将其 box-sizing 属性设置为“border-box”，其中包含元素总宽度和高度中的内边距和边框。
属性选择器 : img[alt] { border: 2px Solid black; } 将为所有具有 alt 属性的图像添加边框。
属性选择器 : input[type="text"] { width: 100%; - 这将选择所有类型为“text”的输入元素，并将其宽度设置为其父容器的 100%。
伪类选择器是 CSS 中的一项强大功能，它允许我们根据元素在文档结构中的状态或位置而不是其类型、属性或类来选择元素并设置元素样式。它们有助于创建动态和响应式设计。
动态伪类包括根据用户交互而变化的样式。例如，a:hover { 颜色: 红色; } 将鼠标悬停在链接上时将颜色更改为红色。
结构伪类根据元素在文档结构中的位置来选择元素。例如，p：first-child {font-weight：bold; } 将使第一段在其包含元素中变为粗体。
否定伪类 :not() 从选择中排除特定元素。例如，div:not(.highlight) { 背景颜色：黄色； } 会将所有 div 的背景颜色更改为黄色，除了那些具有“highlight”类的 div。
输入伪类用于根据表单元素的状态设置样式。例如，输入：禁用{不透明度：0.5; } 将以半不透明度设置禁用的输入字段的样式。
动态伪类 : a:focus { Outline: none;单击或通过键盘导航到链接时，将从链接中删除焦点轮廓。
动态伪类 : 按钮:active { 背景颜色: 红色; } 将在单击按钮时将按钮的背景颜色更改为红色。
结构伪类 : li:last-child { color: red; } 会将每个列表中的最后一个列表项设置为红色。
结构伪类 : p:nth-child(2) { color: blue; } 将选择其父元素中的第二段并将文本着色为蓝色。
否定伪类 : p:not(.no-border) { border: 1px Solid black; } 将为所有没有“无边框”类的段落添加边框。
否定伪类 : div:not(#exclude) { border: 1px Solid green; } 将为所有没有 id“exclude”的 div 元素添加边框。
输入伪类 : input:checked { 背景颜色: green; } 会将选中的输入元素的背景颜色更改为绿色。
输入伪类 : input:valid { border: 2px Solid green; } 将根据验证规则为所有有效输入字段添加绿色边框。
伪元素选择器允许我们设置文档的某些部分的样式。它们可用于设置元素的第一个字母或行的样式，或在 HTML 元素之前或之后插入内容。
这些伪元素让我们可以在元素内容之前或之后插入内容。
示例：
p::before {
content: "Read this - ";
color: red;
}
这将在每个段落的内容之前插入“阅读此 - ”并将其涂成红色。
这些伪元素用于设置文本块的第一个字母或第一行的样式。
示例：
p::first-letter {
font-size: 20px;
color: blue;
}
这将使每个段落的第一个字母大小为 20px，颜色为蓝色。
p::after { content: "*"; } - 这将在每个段落后添加一个星号 (*)。
.warning::before { content: "警告: ";字体粗细：粗体；颜色: 红色; - 这将在“警告”类的元素内容之前添加“警告：”。文本将为粗体和红色。
blockquote::first-line { font-weight: 粗体; } - 这将使每个块引用的第一行变为粗体。
div::first-letter { 文本变换：大写； } - 这会将每个 div 的第一个字母转换为大写。
h1::after { content: "";颜色：绿色； } - 这将在每个 h1 元素后添加一个绿色复选标记。
伪元素和伪类是我最喜欢的一些选择器，要真正理解它们，我建议您进行大量练习。
以下是 Codepen 上的一些示例，您可以尝试一下：
示例1
教程
示例2
教程
示例3
教程
这些示例看起来很简单，但如果您检查代码，您会发现它们是用很少的伪类制成的！
CSS 中的组合选择器是选择与其他元素满足某些关系标准的特定元素的强大方法。这些选择器允许我们根据元素在文档树中的关系来定位元素，例如某个元素是否是另一个元素的子元素、后代元素或同级元素。
后代组合子由空格表示。它选择某个元素的后代元素。
示例：
div p { color: blue;}
这将选择所有
作为
div p { background-color: yellow;}
这将选择所有
作为
子组合器由 > 表示。它选择某个元素的直接子元素。
示例：
div > p { color: blue;}
这将选择所有
作为
div > p { border: 1px solid red;}
This will select all
elements that are direct children of a
An adjacent sibling combinator is denoted by +. It selects an element that is directly after another specific element.
Example:
div + p { color: blue;}
This will select any
element that is directly after a
A general sibling combinator is denoted by ~. It selects elements that are siblings of a certain element.
Example:
div ~ p { color: blue;}
This will select all
elements that are siblings of a
Advanced CSS3 selectors provide more precise targeting capabilities than basic selectors. These include attribute selectors with various matchers and nth-child/nth-of-type selectors.
Attribute selectors can be used with various matchers to select elements based on specific conditions related to their attributes.
Example:
input[type="text"] {
color: blue;
}
This will select all input elements with the type attribute of "text" and color the text blue.
The nth-child and nth-of-type selectors are used to select elements based on their position in the parent element.
Example:
p:nth-child(2) {
color: red;
}
This will select the second child paragraph of its parent element and color the text red.
Attribute Selector with Matcher: a[href^="https"] {font-style: italic;} - This will select all links that have an href attribute that starts with "https" and make the text italic.
Attribute Selector with Matcher: input[type$="text"] {background-color: yellow;} - This will select all input elements that have a type attribute that ends with "text" and give them a yellow background.
Nth-child Selector: li:nth-child(odd) {background-color: grey;} - This will select all odd-numbered list items and give them a grey background.
Nth-of-type Selector: p:nth-of-type(3n) {font-weight: bold;} - This will select every third paragraph and make the text bold.
Use the Right Selector : The key to using CSS3 selectors effectively is to use the right selector for the job. For instance, use class selectors when you want to style a group of elements and ID selectors for unique elements.
Avoid Over-Specification : Over-specifying selectors can make your CSS hard to maintain. Stick to simple selectors as much as possible.
Use Shorthand Properties : Shorthand properties can make your CSS cleaner and easier to read. For example, use margin: 0 auto; instead of margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;.
Group Selectors : If multiple selectors share the same style declaration, group them together to keep your CSS DRY (Don't Repeat Yourself).
Comment Your Code : Commenting your CSS can help you and others understand what your code does, especially when using complex selectors.
Use Pseudo-classes and Pseudo-elements : These can help you target elements based on their state or position in the document, which can make your CSS more dynamic and responsive.
Keep Specificity Low : Overly specific selectors can lead to specificity wars, making it hard to override styles later. Keep your specificity as low as possible.
Test Across Different Browsers : Different browsers can interpret CSS selectors differently. Always test your CSS across different browsers to ensure consistency.
In conclusion, selectors, ranging from basic type, class, and ID selectors to advanced pseudo-classes, pseudo-elements, and combinators, provide a powerful toolset for styling HTML elements. By understanding and applying these selectors, you can create dynamic, responsive, and aesthetically pleasing websites.
However, it's important to follow best practices such as using the right selector for the job, avoiding over-specification, grouping selectors, and testing across different browsers to ensure the maintainability and consistency of your CSS code.
? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
？如果您喜欢这篇文章，请考虑分享。
？ 所有链接 | X | 领英
以上是掌握 CSSelectors：带有示例的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！
