css selector
Published by powerfulyang on Sep 8, 2022
伪类选择器
选择器 | 例子 | 例子描述 |
---|---|---|
a | 选择活动的链接。 | |
input | 选择每个被选中的 <input> 元素。 | |
input | 选择每个被禁用的 <input> 元素。 | |
p | 选择没有子元素的每个 <p> 元素。 | |
input | 选择每个已启用的 <input> 元素。 | |
p | 选择作为其父的首个子元素的每个 <p> 元素。 | |
p | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 | |
input | 选择获得焦点的 <input> 元素。 | |
a | 选择鼠标悬停其上的链接。 | |
input | 选择具有指定范围内的值的 <input> 元素。 | |
input | 选择所有具有无效值的 <input> 元素。 | |
(language) | p(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
p | 选择作为其父的最后一个子元素的每个 <p> 元素。 | |
p | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 | |
a | 选择所有未被访问的链接。 | |
(selector) | (p) | 选择每个非 <p> 元素的元素。 |
(n) | p(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
(n) | p(2) | 选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。 |
(n) | p(2) | 选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数 |
(n) | p(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
p | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 | |
p | 选择作为其父的唯一子元素的 <p> 元素。 | |
input | 选择不带 "required" 属性的 <input> 元素。 | |
input | 选择值在指定范围之外的 <input> 元素。 | |
input | 选择指定了 "readonly" 属性的 <input> 元素。 | |
input | 选择不带 "readonly" 属性的 <input> 元素。 | |
input | 选择指定了 "required" 属性的 <input> 元素。 | |
root | 选择元素的根元素。 | |
#news | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 | |
input | 选择所有具有有效值的 <input> 元素。 | |
a | 选择所有已访问的链接。 |
链接伪类选择器
链接伪类选择器用于给超链接标签添加特殊的效果
1a:link {color: red;} /* 未访问的链接状态 */
2a:visited {color: green;} /* 已访问的链接状态 */
3a:hover {color: blue;} /* 鼠标滑过链接状态 */
4a:active {color: yellow;} /* 鼠标按下去时的状态 */
结构(位置)伪类选择器
常用的结构伪类选择器:
-
E:first-child
选择器
表示选择父元素中的第一个子元素 E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
举例:1ol > li:first-child{ 2 color: red; 3}
-
:last-child
选择器
选择的是元素的最后一个子元素。比如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。
举例:1ol > li:last-child{ 2 color: red; 3}
-
:nth-child(n)
选择器
用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,不仅可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
举例:1ol li:nth-child(even){ 2 background: orange; 3}
-
E:empty
选择器
表示的就是空。用来选择没有任何内容的元素E,这里没有内容指的是一点内容都没有,哪怕是一个空格。
举例:1p{ 2 background: orange; 3 min-height: 30px; 4} 5p:empty { 6 display: none; 7}
-
E:root
选择器
从字面上我们就可以很清楚的理解是根选择器,它的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。1:root{ 2 background:pink; 3} 4/*等同于*/ 5html {background:pink;}
目标伪类选择器
:target
选择器会突出显示当前活动的 HTML 锚,然后给它添加相应的样式。
1<h2><a href="#brand">Brand</a></h2>
2<div id="brand">
3 content for Brand
4</div>
5
6#brand:target {
7 background: orange;
8 color: #fff;
9}
当点击链接时,锚点被激活,#brand 的
样式会被应用。逻辑选择器
在 CSS 选择器家族中,新增这样一类比较新的选择器逻辑选择器,目前共有 4 名成员:
:is
:where
:not
:has
伪类选择器
:is()
CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。
在之前,对于多个不同父容器的同个子元素的一些共性样式设置,可能会出现如下 CSS 代码:
1header p:hover,
2main p:hover,
3footer p:hover {
4 color: red;
5 cursor: pointer;
6}
而如今有了 :is()
伪类,上述代码可以改写成:
1:is(header, main, footer) p:hover {
2 color: red;
3 cursor: pointer;
4}
它并没有实现某种选择器的新功能,更像是一种语法糖,只是对原有功能的重新封装设计,实现了更容易的表达一个操作的语法,简化了某些复杂代码的写法。
ps: :is
不支持伪元素
有个特例,不能用 :is()
来选取 ::before
和 ::after
两个伪元素。譬如:
注意,仅仅是不支持伪元素,伪类,譬如
:focus
、:hover
是支持的。
:is()
的优先级是由它的选择器列表中优先级最高的选择器决定的。
伪类选择器
和 :is
用法基本一致,唯一的区别在于:where()
的优先级总是为 0,而:is()
的优先级是由它的选择器列表中优先级最高的选择器决定的。
伪类选择器
:not
伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
与 :is()
类似,:not()
选择器本身不会影响选择器的优先级,它的优先级是由它的选择器列表中优先级最高的选择器决定的。
伪类选择器
:has()
CSS 伪类代表一个元素,其给定的选择器参数(相对于该元素的 :scope
)至少匹配一个元素。
1// 下面的选择器只会匹配直接包含 <img> 子元素的 <a> 元素:
2a:has(> img)
选择器 -> 组合器
-
后代组合器(Descendant combinator)
' '(空格)组合器选择前一个元素的后代节点。
语法:A B
例子:div span
匹配所有位于任意<div>
元素之内的<span>
元素。 -
直接子代组合器(Child combinator)
>
组合器选择前一个元素的直接子代的节点。
语法:A > B
例子:ul > li
匹配直接嵌套在<ul>
元素内的所有<li>
元素。 -
一般兄弟组合器(General sibling combinator)
~
组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
语法:A ~ B
例子:p ~ span
匹配同一父元素下,<p>
元素后的所有<span>
元素。 -
紧邻兄弟组合器(Adjacent sibling combinator)
+
组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
语法:A + B
例子:h2 + p
会匹配所有紧邻在<h2>
(en-US) 元素后的<p>
元素。 -
列组合器(Column combinator) Experimental
||
组合器选择属于某个表格行的节点。
语法:A || B
例子:col || td
会匹配所有<col>
作用域内的<td>
元素。 -
交集选择器 交集选择器两个选择器直接连接构成
1h1.class { 2 3} 4 5.classA.classB { 6 7}
-
并集选择器, 并集选择器一定是英文逗号隔开
1/*选择器1,选择器2,选择器3......{属性:属性值;}*/ 2.top, #nav, p { 3 color:red; 4}
选择器 -> 属性选择器
example:
1/* 存在 title 属性的<a> 元素 */
2a[title] {
3 color: purple;
4}
5
6/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
7a[href="https://example.org"] {
8 color: green;
9}
10
11/* 存在 href 属性并且属性值包含"example"的<a> 元素 */
12a[href*="example"] {
13 font-size: 2em;
14}
15
16/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
17a[href$=".org"] {
18 font-style: italic;
19}
20
21/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
22a[class~="logo"] {
23 padding: 2px;
24}
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性,且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。
[attr|=value]
表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-
"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
[attr^=value]
表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
[attr$=value]
表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 <p> 元素之后插入内容。 |
::before | p::before | 在每个 <p> 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
select shadow DOM child element
譬如试用 micro-app 时,想要改变 shadow DOM 内部元素的样式。
1document.getElementById('hui-agent')?.shadowRoot?.querySelector('micro-app-head');
通过添加 style 标签来覆盖。