购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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会员卡,近千本电子书免费畅读。 vuexuK7ObqdyCn/zND3IiC84pRuHR0LiTSe5grufv4KdgbqlSFZ0SiIyyklCiDyT

点击中间区域
呼出菜单
上一章
目录
下一章
×