服务器之家
您的位置： 首页 编程语言 css

CSS中的：any-link、:focus-visible、:focus-within、:where()

100人浏览   2024-11-12 08:19:35

伪类选择器以冒号开头，并基于当前元素的状态进行匹配。状态可能和DOM树相关，也可能和状态的改变有关，比如:hover 和 :checked。

:any-link


兼容性还行；

可以匹配具有href属性的<a>和<area>，不管这些链接是否被访问过。

:any-link等价于:link 加上 :visited。

值得注意的是，:any-link 比a标签选择器优先级要高，下面的例子中 color: purple; 会胜出。

:any-link {
  color: purple;
}

a {
  color: red;
}

:focus-visible

我敢打赌，PC网页上一个常见的可访问性设计不好的地方就是诸如<a><button><input>这些元素在获取焦点后没有显示outline。这对于那些习惯使用键盘进行页面访问的用户来说非常不友好，在一串Tab操作后，他们不知道自己停留在了哪个页面元素上。

:focus-visible的出现就是为了解决这个问题，它会在浏览器觉得需要给与用户反馈的时候显示出一个获取到焦点的圈圈(focus ring)。

safari目前不支持。以下是demo:

<style>
    .wrapper {
        background: black;
        text-align: center;
        width: 360px;
        height: 100px;
        padding: 40px;
        box-sizing: border-box;
        color: blanchedalmond;
    }

    .image-nav-button {
        color: blanchedalmond;
        text-decoration: none;
        font-size: 20px;
        line-height: 1em;
    }

    .next {
        float: right;
    }

    .prev {
        float: left;
    }

    .image-nav-button:focus {
        outline: none;
        /* Try uncommenting below, then clicking the buttons */
        /* outline: 3px solid red; */
    }

    .image-nav-button:focus-visible {
        outline: 3px solid blanchedalmond;
    }
</style>

<div class="wrapper">
    <a href="#" tabindex="1" class="image-nav-button prev">← Prev Image</a>
    <a href="#" tabindex="2" class="image-nav-button next">Next Image →</a>
</div>
<p><small>
      See caniuse.com for more details
</small></p>

:focus-within


:focus-within的行为类似于一个父元素选择器。:focus-within应用于一个容器，并且某个后代元素获取到焦点时，某些样式会被加到容器上(或者是容器内的其他后代元素上)。



<style>
  .form-group:focus-within {
       outline: 2px dashed blue;
   }

 .form-group:focus-within label{
       color: blue;
 }
</style>

<div class="form-group">
  <label for="abcdef">Example form field</label>
  <input type="text" id="abcdef">
</div>

:where()

假设你熟悉:is(), 那么:where()也很简单。:where()和:is()不一样的一点就是:where()是零特异性的(zero-specificity)，比如下面这段代码：

:where(article) img {
       border: 5px solid green;
}

img {
       border: 5px solid orange;
}

最终img的border是orange色的，和直观经验不一样，原因就是:where() img的权重和img是一样的。这个选择器经常是做框架的人使用。

相关推荐