带你了解CSS伪类选择器的新奇体验

2023-03-02 11:45:35 浏览数 (2)

CSS 伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。当然伪类针对不同浏览器的兼容性还存有一定的不同，建议使用前先了解下对应用法及兼容性。

通常最为我们熟知的CSS伪类选择器就是下面这四兄弟：

  • :link / 未访问的链接 /
  • :visited / 已访问的链接 /
  • :hover / 鼠标划过链接 /
  • :active / 已选中的链接 /

其实他们的群体不仅仅至少有这四位，还有下面这一群：

  • :target / 匹配所有URL带有#XXX锚链接的元素 /
  • :first-child / 匹配某个父级元素的第一个子元素 /
  • :first-letter / 匹配当前元素的第一个字母 /
  • :first-line / 匹配当前元素的第一行 /
  • :before / 匹配当前元素的前面 /
  • :after / 匹配当前元素的后面 /
  • :nth-child / 匹配某个父级元素的第n个子元素 /
  • :empty / 匹配没有内容或子元素的元素 /
  • :checked / 匹配任何选中状态的radio/checkbox/option /
  • :blank / 匹配未输入的输入框元素 /
  • :enabled / 匹配设置启用了enabled的元素（设置为输入元素） /
  • :disabled / 匹配设置了disabled的元素（禁止输入） /
  • :required / 匹配设置了required的元素 （必须输入）/
  • :valid / 匹配判定输入内容有效的输入框元素 /
  • :invalid / 匹配判定输入内容无效的输入框元素 /
  • :playing / 匹配正在播放的音频或视频元素 /
  • :lang / 匹配设置了lang='no'属性的元素 /
  • :focus / 匹配当前获取焦点的元素 /

当然伪类选择器还有很多，我们只是例举了部分相对常用的，想了解更多可以看看《CSS伪类选择器》

今天我们主要是来介绍一下下面这三个新面孔的：

  • :is / 将对应的匹配规则应用于多个元素（最高优先级） /
  • :where / 将对应的匹配规则应用于多个元素（最低优先级）/
  • :has / 匹配包含对应子元素的父级元素 /

1 . :is伪类选择器

允许将某个选择器规则匹配于多个选择器，并且是一个可容错的选择器列表，当某一项规则无效时，不会阻碍其他选择器的匹配。
相关浏览器兼容性：
来个简单的例子先理解一下使用前：

header p:hover,
main p:hover,
footer p:hover {
    color: #444; 
    cursor: pointer;
}

或像Sass进行嵌套

header, main, footer {
     p {
         color: #444;
         cursor: pointer;
     }
}

使用后：

:is(header, main, footer) p {
    color: #444;
}

再来个复杂点的例子

使用前：

article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
    color: green;
}

使用后：

article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
    color: green;
}

且当其中某一个条件不匹配时，并不会导致失效，而是会自动匹配下一个选择器。

2 .:where伪类选择器

功能上与 :is 相同，区别在于:is伪类选择器拥有最高优先级，而 :where 的优先级则为0，可以避免影响其他已经声明同类样式效果。
相关浏览器兼容性：
举个例子：

article p {
    color: black;
}

:is(article, section, aside) p {
    color: red;
}

:where(article, section, aside) p {
    color: blue;
}

上面代码中三句样式都针对article中的p元素设置了字体颜色，但最终p标签的字体颜色是红色。也就是:is的最高优先级产生了效果，其次是article p{}，最后才是:where。因此where可以更多的应用于需要低优先级渲染样式的需求中。

3 . :has伪类选择器

:has支持匹配对应规则的父级选择器，这将是最受欢迎的伪类选择器之一。
相关浏览器兼容性：
来个简单的例子先理解一下

a:has(img, section) {
    color: red;
}

上面代码会匹配出所有包含了img与section元素的父级a元素，并设置红色字体颜色。
再来个相对复杂点的例子

fieldset:has(:required:invalid) {
    border: 3px solid red;
}

上面的例子当fieldset元素内出现不满足:required或者:invalid其中某个条件的元素时，fieldset元素会被设置一个3px的红色实线边框。


CSS

0 人点赞