CSS中选择器的分类
在 CSS 中，选择器是用于选择 HTML 元素并应用样式的关键工具。选择器可以根据不同的分类方式进行组织。根据用途和复杂度，CSS 选择器通常可以分为以下几类：
1.基本选择器
这些选择器用于直接选择 HTML 元素。
- 元素选择器（Type Selector）： 通过元素标签选择 HTML 元素。
p {
color: red;
}
选择所有 <p> 元素。
- 类选择器（Class Selector）： 通过元素的 class 属性选择元素。
.button {
background-color: blue;
}
选择所有类名为 button 的元素。
- ID 选择器（ID Selector）： 通过元素的 id 属性选择元素。id 是唯一的，因此 ID 选择器通常用于选中单个元素。
#header {
font-size: 20px;
}
选择 id=“header” 的元素。
- 通用选择器（Universal Selector）： 选择页面上的所有元素。
* {
margin: 0;
padding: 0;
}
2. 组合选择器
这些选择器结合了多个选择器，可以更精确地选择元素。
- 后代选择器（Descendant Selector）： 选择位于某个元素内的所有子元素。
div p {
color: green;
}
选择所有位于 <div> 元素内部的 <p> 元素。
- 子元素选择器（Child Selector）： 选择某个元素的直接子元素（不包括更深层的嵌套）。
div > p {
color: blue;
}
选择 <div> 的直接子元素 <p>。
- 相邻兄弟选择器（Adjacent Sibling Selector）： 选择紧跟在某个元素后的兄弟元素。
h1 + p {
margin-top: 0;
}
选择紧跟在 <h1> 元素后的第一个 <p> 元素。
- 通用兄弟选择器（General Sibling Selector）： 选择某个元素之后的所有兄弟元素。
h1 ~ p {
color: orange;
}
选择所有紧跟在 <h1> 元素后的 <p> 元素。
3. 属性选择器
属性选择器根据元素的属性来选择元素。
- 选择具有某个属性的元素：
input[type="text"] {
background-color: lightgray;
}
选择所有type="text"的 <input> 元素。
- 选择具有特定属性值的元素（如开始、包含等）：
a[href^="https://"] {
color: green;
}
选择所有 href 属性值以 https:// 开头的<a>元素。
- 选择包含特定字符的元素：
a[href*="example"] {
color: blue;
}
选择所有 href 属性值中包含 example 的 <a> 元素。
4. 伪类选择器
伪类选择器用于选择元素的特定状态或位置。
- :hover：选择用户将鼠标悬停在元素上的状态。
a:hover {
color: red;
}
- :active：选择元素被激活的状态（如按钮被点击时）。
button:active {
background-color: yellow;
}
- :nth-child()：选择父元素中根据位置匹配的子元素。
li:nth-child(2) {
color: blue;
}
- :first-child / :last-child：选择父元素中的第一个或最后一个子元素。
p:first-child {
font-weight: bold;
}
- :not()：选择不匹配某个选择器的元素。
div:not(.active) {
background-color: lightgray;
}
5. 伪元素选择器
伪元素选择器用于选择元素的某些部分或创建虚拟元素。
- :before：在元素的内容之前插入内容。
p::before {
content: "Note: ";
font-weight: bold;
}
- :after：在元素的内容之后插入内容。
p::after {
content: ".";
}
- :first-letter：选择元素的第一个字母。
p::first-letter {
font-size: 2em;
}
- :first-line：选择元素的第一行文本。
p::first-line {
font-variant: small-caps;
}
6. 组合与继承选择器
- 组合选择器：组合多种选择器以达到特定选择目的。
div p.button {
color: red;
}
选择所有位于 <div> 内，且具有 button 类的 <p> 元素。
- 继承选择器：某些 CSS 属性会被子元素继承，例如字体和颜色等。如果你在父元素上设置了样式，子元素通常会自动继承这些样式。
body {
font-family: Arial, sans-serif;
}
原文地址：https://blog.csdn.net/qq_43072399/article/details/145296753
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！