CSS3中的4个逻辑选择器-猿码集

1. 逻辑选择器简介

在CSS的选择器中，逻辑选择器（Logical Combinators）是用来连接两个或多个选择器的关键字，用于筛选符合逻辑条件的元素。CSS3新增了4个逻辑选择器，它们是:not()，:has()，:any()，:matches()。本文将会详细介绍这四种逻辑选择器的用法和实际应用场景。

2. :not()伪类选择器

:not()伪类选择器用于选取不符合括号内选择器的元素，例如选取所有非p元素的元素：


    :not(p) {
        color: blue;
    }

上面这段代码选择所有非p元素的文字颜色为蓝色。

2.1 使用:not()选择器的注意事项

1.使用的选择器不能有空格。


    /* 错误示范 */
    :not(p .example) {
        color: red;
    }
 
    /* 正确示范 */
    :not(p) .example {
        color: blue;
    }

2.使用的选择器必须在括号内。


    /* 错误示范 */
    :not(p, a) {
        color: red;
    }
 
   /* 正确示范 */
    :not(p):not(a) {
        color: blue;
    }

3. :has()伪类选择器

:has()伪类选择器用于选取包含特定元素的父元素，例如选取所有包含p元素的div元素：


    div:has(p) {
        border: solid 1px black;
    }

上面这段代码选择所有包含p元素的div元素添加黑色实线边框。

3.1 使用:has()选择器的注意事项

虽然:has()选择器可以匹配包含特定元素的父元素，但它在CSS3中已被废弃。不过，:has()选择器在jQuery中仍可使用并且十分常用。

4. :any()伪类选择器

:any()伪类选择器用于选取匹配特定选择器中至少一个选择器的元素，例如选取匹配div、p和span节点名称的元素：


    :any(div, p, span) {
        background-color: rgba(255,0,0,0.1);
    }

上面这段代码将所有匹配div、p和span节点名称的元素的背景颜色设置为红色带有一定透明度的颜色。

4.1 使用:any()选择器的注意事项

1.只能使用在中括号中。


    /* 错误示范 */
    :any(div p) {
        color: red;
    }
 
    /* 正确示范 */
    :any(div, p) {
        color: blue;
    }

2.使用时必须至少有一个选择器匹配。

当所有选择器都不被匹配时，无法应用样式。例如下面这段代码即不能应用样式：


    /* 所有选择器都不能匹配，因此无法应用样式 */
    :any(a, p) {
        color: white;
        background: black;
    }

5. :matches()伪类选择器

:matches()伪类选择器作用和:any()大致相同，但:matches()选择器包含一个额外的条件：一组特定的选择器，必须同时匹配选择器中的所有元素，就像使用多个选择器进行选择一样。


    :matches(section, article) p {
        font-size: 20px;
    }

上面这段代码将所有在section和article标签下的p元素的字体大小设置为20像素。

5.1 使用:matches()选择器的注意事项

1.只能使用在中括号中。


    /* 错误示范 */
    :matches(h1, h2, h3) {
        color: red;
    }
 
    /* 正确示范 */
    :matches(h1, h2, h3) {
        color: blue;
    }

2.适用于选择器数量较少的情况。

当选择器数量过多时，:matches()选择器可能会降低性能。因此，应避免将大量选择器组合在一起使用。

6.总结

逻辑选择器是CSS3新增的一种强大的选择器，可以用于过滤符合逻辑条件的元素。其中:not()选择器用于选择不符合括号内选择器的元素，:has()选择器用于选择包含特定元素的父元素，:any()选择器用于选择匹配特定选择器中至少一个选择器的元素，而:matches()选择器作用和:any()选择器大致相同，但需同时匹配选择器中的所有元素。在实际开发过程中，合理、灵活地运用逻辑选择器有助于提高CSS开发效率和代码的可维护性。

CSS3中的4个逻辑选择器