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 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/38644/30232211
标签:...,匹配,标签,元素,类型,选择器,CSS From: https://www.cnblogs.com/amboke/p/16718678.html