css selector

Published by powerfulyang on Sep 8, 2022

链接伪类选择器用于给超链接标签添加特殊的效果

1a:link {color: red;}        /* 未访问的链接状态 */
2a:visited {color: green;}    /* 已访问的链接状态 */
3a:hover {color: blue;}     /* 鼠标滑过链接状态 */
4a:active {color: yellow;} /* 鼠标按下去时的状态 */

常用的结构伪类选择器：

• E:first-child 选择器
  表示选择父元素中的第一个子元素 E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
  举例：

  css

  Copy Code

  1ol > li:first-child{
  2  color: red;
  3}

• :last-child 选择器
  选择的是元素的最后一个子元素。比如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器。
  举例：

  css

  Copy Code

  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时，选择器将选择不到任何匹配的元素。
  举例：

  css

  Copy Code

  1ol li:nth-child(even){
  2  background: orange;
  3}

• E:empty 选择器
  表示的就是空。用来选择没有任何内容的元素E，这里没有内容指的是一点内容都没有，哪怕是一个空格。
  举例：

  css

  Copy Code

  1p{
  2 background: orange;
  3 min-height: 30px;
  4}
  5p:empty {
  6  display: none;
  7}

• E:root 选择器
  从字面上我们就可以很清楚的理解是根选择器，它的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。

  css

  Copy Code

  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> 元素。

• 交集选择器 交集选择器两个选择器直接连接构成

  css

  Copy Code

  1h1.class {
  2
  3}
  4
  5.classA.classB {
  6
  7}

• 并集选择器, 并集选择器一定是英文逗号隔开

  css

  Copy Code

  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 值的元素。

譬如试用 micro-app 时，想要改变 shadow DOM 内部元素的样式。

1document.getElementById('hui-agent')?.shadowRoot?.querySelector('micro-app-head');

通过添加 style 标签来覆盖。