CSS 中的选择器类型
CSS 中的选择器类型
在 CSS 中，选择器起着至关重要的作用。在这里，您可以根据示例查看选择器的类型。
在此之前，了解特异性很重要，
CSS 的特殊性是什么？
它是选择器的顺序和它们的执行层次
执行优先级作品如下：
!important > 内联 > #ID > .class > 元素
现在，让我们看看选择器的类型，
1. 万能选择器——( * )
星号符号是一种选择器，它选择 全部 任何类型的元素。
* {颜色：“绿色”； }
2.类型选择器（或）元素选择器
允许您通过以下方式匹配元素的选择器 节点名称 （或者） 标签名 被称为类型选择器
p { _/* 这种类型会选择文档中的所有 p 个标签 */_ 颜色：“绿色”； }
3. 类选择器
-
类选择器根据 html 类属性中给出的名称值匹配元素
-
一个
.as 要添加在该名称前面以进行访问 -
广泛使用和推荐
. 测试 { /*
你好
这里测试的是类属性的值 */
颜色：“绿色”；
}
4. ID 选择器
-
id 选择器根据 html id 属性中给出的名称值匹配元素
-
通过使用访问
#在名称值前面 -
只能以独特的方式使用，不强烈推荐
测试{ _/*
你好
这里测试的是类属性的值 */_
颜色：“绿色”；
}
5. 属性选择器
-
这个 CSS 选择器根据元素的存在或属性中给出的值来选择元素。
a[href="example.com"] { ... }
/*href 值为 example.com 的锚标签将被定位 /
_ ol[type="b"] { ... }
_/ 由小字母组成的有序列表标签作为类型将被定位 */
6. 分组选择器
-
这 （
,) 选择器选择两个匹配的节点div，跨度 { ... }
/* 这完全匹配 div 和 span 元素 */
7. 组合器
7.1 后代组合子
元素之间的空白区域选择其父元素的所有指定子元素
div 跨度 {...} _/* 这匹配 div 内的所有 span 元素 */_
7.2 子组合器
这 > 选择父元素的所有直接子元素
div > 跨度 {...}
_/* 这匹配所有直接作为子元素的 div 标签的 span 元素 */_
7.3 相邻组合子
-
这
+分隔两个元素是第二个元素是第一个元素的后续 -
对于上述情况，两个元素必须在同一个父元素下
图像 + p { ... }
/* 选择 img 标签之后的 p 标签，其中 img 和 p 都在同一个父元素下 */
8. 伪类
Pseudo Classes 让您不仅可以在元素位于 DOM 树中时将样式应用于元素，还可以根据用户交互添加样式
一：悬停{ ... }
_/* 如果用户悬停在锚标签上，将应用 css 规则块 */
_
.container:全屏 { ... }
_/* 当元素在全屏之间来回切换时，将应用此 css 规则 */
_
输入：自动填充 { ... }
_/* 当浏览器自动填充时匹配输入 */_ *：启用 { ... }
_/* 表示 DOM 中所有启用的元素 */_ *：禁用 { ... }
_/* 表示 DOM 中所有禁用的元素 */_
输入：检查 { ... }
_/* 表示任何处于选中状态或切换状态的单选、选中、选择元素 */_ 一条链接 { ... }
_/* 匹配尚未访问的锚元素 */
_
一个：访问过 { ... }
_/* 匹配已经访问过的锚元素 */_ li:nth-child(arg)
_/* 选择与参数相关的所有 li 元素，参数将是奇数或偶数 */
_
李：第一个孩子 { ... }
_/* 选择组中的第一个兄弟 */_ li:last-child { ... }
_/* 选择最后一个兄弟 */_ 按钮：活动 { ... }
_/* 表示用户正在激活的元素 */_ 输入：焦点 { ... }
_/* 表示获得焦点的元素 */_
9. 伪元素
伪元素是添加到选择器的关键字，它允许对选定元素的特定部分进行样式设置，该部分最初不存在于 DOM 中
p::第一行 { ... }
_/* 选择 p 标签的每一行 */_ 一个::{之后
_/* 这会在 a 标签的末尾添加一个新链接 */
_ 内容：'("attr(href)")';
} 一个::之前{
_/* 这会在 a 标签的开头添加一个新链接 */
_ 内容：'("attr(href)")';
}
输入::占位符 { ... }
_/* 定位输入标签的占位符属性 */_ p::选择 { ... }
_/* 将样式应用于用户选择的部分内容 */_
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
