NEWS

网站建设资讯

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

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

div i
p i
div span
p span
h2 span
h2 i

div span,
div i,
p span,
p i {
    color: red;
}

:is(div, p) :is(span, i) {
    color: red;
}

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

div p::before,
div p::after {
    content: "";
    //...
}

div p:is(::before, ::after) {
    content: "";
    //...
}

    where & is test



    where & is test

div .test-class {
    color: red;
}

div :is(p) {
    color: blue;
}

div :is(p, #text-id) {
    color: blue;
}

div p {
    color: blue;
}
div #text-id {
    color: blue;
}

:is(div, p) span {}
// 等同于
:-webkit-any(div, p) span {}
:-moz-any(div, p) span {}
:matches(div, p) span {}

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

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

    
where & is test

:is(div) p {
    color: red;
}
:where(div) p {
    color: green;
}

    
where & is test

:is(div) p {
    color: red;
}
:where(#container) p {
    color: green;
}

/* 组合*/
:is(h2,h3) :where(.test-a, .test-b) {
  text-transform: uppercase;
}
/* 嵌套*/
.title:where(h2, h3, :is(.header, .footer)) {
  font-weight: bold;
}

div.a

div:not(.b) {
    color: red;
}

div:not(.b) 它可以选择除了 class 为 .b 元素之外的所有 div 元素：

MDN 的错误例子？一个有意思的现象

有趣的是，在 MDN 介绍 :not 的页面，有这样一个例子：

/* Selects any element that is NOT a paragraph */
:not(p) {
  color: blue;
}

意思是，:not(p) 可以选择任何不是

标签的元素。然而，上面的 CSS 选择器，在如下的 HTML 结构，实测的结果不太对劲。

p

div
span
h2

结果如下：

意思是，:not(p) 仍然可以选中

元素。我尝试了多个浏览器，得到的效果都是一致的。

这是为什么呢？这是由于 :not(p) 同样能够选中 ，那么 的 color 即变成了 blue，由于 color 是一个可继承属性，

标签继承了 的 color 属性，导致看到的

也是蓝色。

我们把它改成一个不可继承的属性，试试看：

/* Selects any element that is NOT a paragraph */
:not(p) {
  border: 1px solid;
}

OK，这次

没有边框体现，没有问题！实际使用的时候，需要注意这一层继承的问题！

:not 的优先级问题

下面是一些使用 :not 需要注意的问题。

:not、:is、:where 这几个伪类不像其它伪类，它不会增加选择器的优先级。它的优先级即为它参数选择器的优先级。

并且，在 CSS Selectors Level 3，:not() 内只支持单个选择器，而从  CSS Selectors Level 4 开始，:not() 内部支持多个选择器，像是这样：

/* CSS Selectors Level 3，:not 内部如果有多个值需要分开 */
p:not(:first-of-type):not(.special) {
}
/* CSS Selectors Level 4 支持使用逗号分隔*/
p:not(:first-of-type, .special) {
}

与 :is() 类似，:not() 选择器本身不会影响选择器的优先级，它的优先级是由它的选择器列表中优先级最高的选择器决定的。

:not(*) 问题

使用 :not(*) 将匹配任何非元素的元素，因此这个规则将永远不会被应用。

相当于一段没有任何意义的代码。

:not() 不能嵌套 :not()

禁止套娃。:not 伪类不允许嵌套，这意味着 :not(:not(...)) 是无效的。

:not() 实战解析

那么，:not() 有什么特别有意思的应用场景呢？我这里列举一个。

在 W3 CSS selectors-4 规范 中，新增了一个非常有意思的 :focus-visible 伪类。

:focus-visible 这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

有了这个伪类，就可以做到，当用户使用鼠标操作可聚焦元素时，不展示 :focus 样式或者让其表现较弱，而当用户使用键盘操作焦点时，利用 :focus-visible，让可获焦元素获得一个较强的表现样式。

看个简单的 Demo：

Test 1

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}

使用鼠标点击：

可以看到，使用鼠标点击的时候，触发了元素的 :active 伪类，也触发了 :focus伪类，不太美观。但是如果设置了 outline: none 又会使键盘用户的体验非常糟糕。因为当键盘用户使用 Tab 尝试切换焦点的时候，会因为 outline: none 而无所适从。

因此，可以使用 :focus-visible 伪类改造一下：

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
button:focus:not(:focus-visible) {
  outline: none;
}

看看效果，分别是在鼠标点击 Button 和使用键盘控制焦点点击 Button：

可以看到，使用鼠标点击，不会触发 :foucs，只有当键盘操作聚焦元素，使用 Tab 切换焦点时，outline: 2px solid red 这段代码才会生效。

这样，我们就既保证了正常用户的点击体验，也保证了无法使用鼠标的用户的焦点管理体验，在可访问性方面下了功夫。

值得注意的是，这里为什么使用了 button:focus:not(:focus-visible) 这么绕的写法而不是直接这样写呢：

button:focus {
  outline: unset;
}
button:focus-visible {
  outline: 2px solid red;
}

解释一下，button:focus:not(:focus-visible) 的意思是，button 元素触发 focus 状态，并且不是通过 focus-visible 触发，理解过来就是在支持 :focus-visible 的浏览器，通过鼠标激活 :focus 的 button 元素，这种情况下，不需要设置 outline。

为的是兼容不支持 :focus-visible 的浏览器，当 :focus-visible 不兼容时，还是需要有 :focus 伪类的存在。

因此，这里借助 :not() 伪类，巧妙的实现了一个实用效果的方案降级。

这里有点绕，需要好好理解理解。

:not 兼容性

经历了 CSS Selectors Level 3 & CSS Selectors Level 4 两个版本，到今天（2020-05-04），除去 IE 系列，:not 的兼容性已经非常之好了：

:has 伪类选择器

OK。最后到所有逻辑选择器里面最重磅的 :has 出场了。它之所以重要是因为它的诞生，填补了在之前 CSS 选择器中，没有核心意义上真正的父选择器的空缺。

:has 伪类接受一个选择器组作为参数，该参数相对于该元素的 :scope 至少匹配一个元素。

实际看个例子：

    
div -- p


    div -- p.has



    
div -- p

div:has(.g-test-has) {
    border: 1px solid #000;
}

我们通过 div:has(.g-test-has) 选择器，意思是，选择 div 下存在 class 为 .g-test-has 的 div 元素。

注意，这里选择的不是 :has() 内包裹的选择器选中的元素，而是使用 :has() 伪类的宿主元素。

效果如下：

可以看到，由于第二个 div 下存在 class 为 .g-test-has 的元素，因此第二个 div 被加上了 border。

:has() 父选择器 -- 嵌套结构的父元素选择

我们再通过几个 DEMO 加深下印象。:has() 内还可以写的更为复杂一点。

    div span



    

        

            
div ul li h3 span
        
    



    
div h3 span

div:has(>h3>span) {
    margin-left: 24px;
    border: 1px solid #000;
}

这里，要求准确选择 div 下直接子元素是 h3，且 h3 下直接子元素有 span 的 div 元素。注意，选择的最上层使用 :has() 的父元素 div。结果如下：

这里体现的是嵌套结构，精确寻找对应的父元素。

:has() 父选择器 -- 同级结构的兄元素选择

还有一种情况，在之前也比较难处理，同级结构的兄元素选择。

看这个 DEMO：

div + p