css4 范围伪类 | tanglijun's blog

css4 范围伪类

范围伪类

有效性伪类是范围限制元素的选择器。:in-range 选择值在指定范围内的元素，:out-of-range 选择值在指定范围外的元素。

语法

:in-range {
  /* declarations */
}

:out-of-range {
  /* declarations */
}

示例

:in-range {
  opacity: 1.0;
}

:out-of-range {
  opacity: 0.6;
}

上述示例设置 :in-range 元素的 opacity 为 1.0，设置 :out-of-range 元素的为 0.6。

＃ 浏览器兼容情况

http://caniuse.com/#feat=css-in-out-of-range

参考资料

• http://css4-selectors.com/selector/css4/validity-pseudo-class
• http://css4.rocks/selectors-level-4/range-pseudo-classes.php

许可协议：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
本文链接：https://tanglj.cn/2017/03/15/css4-range-pseudo-class/