1.3 无效CSS选择器的特性与实际应用

很多CSS伪类选择器是最近几年才出现的，浏览器并不支持，浏览器会把这些选择器当作无效选择器，这是没有任何问题的。但是当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。举个例子，有如下CSS代码：

.example:hover,
.example:active,
.example:focus-within {
   color: red;
}

:hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。

因此，我们在使用一些新的CSS选择器时，出于渐进增强的目的，需要将它们分开书写：

/* IE浏览器可识别 */
.example:hover,
.example:active {
   color: red;
}
/* IE浏览器不可识别 */
.example:focus-within {
   color: red;
}

不过，在诸多CSS选择器中，这种无效选择器特性出现了一个例外，那就是浏览器可以识别以-webkit-私有前缀开头的伪元素。例如，下面这段CSS选择器就是无效的：

div, span::whatever {
  background: gray;
}

但是，如果加上一个-webkit-私有前缀，浏览器就可以识别了，<div>元素背景色为灰色，如图1-3所示：

div, span::-webkit-whatever {
  background: gray;
}

图1-3 div背景色为gray

除了IE浏览器，其他浏览器均支持（Firefox 63及以上版本支持）识别这个-webkit-无效伪元素的特性。于是，我们就可以灵活运用这种特性来帮助完成实际开发。例如，对IE浏览器和其他浏览器进行精准区分：

/* IE浏览器 */
.example {
  background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
  background: gray;
}

当然，上面的无效伪类导致整行选择器失效的特性也可以用来区分浏览器。

读者服务：

微信扫码关注【异步社区】微信公众号，回复“e60931”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。