关闭

CSS中的focus-within伪类选择器

时间: 2018-08-03阅读: 1730标签: 选择器

css中:focus-within是什么

css中 :focus-within 是一个伪类,现在已经被列入到CSS选择器中(CSS Level 4 selector)。CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

没看懂,可以看下面的例子:

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>

<style>
.container:focus-within { 
  background-color: #aaa; 
}
</style>

如果div.container获取到焦点时,就会有一个#aaa背景色。而且如果其后代元素获得焦点时,其背景色也会更改,所以<input>收到焦点时,div的背景色仍是#aaa。 这样,我们就不需要实现这样功能时,总是使用JavaScript,极大方便开发者。


:focus-within的使用场景

:focus-within 非常强大,主要是由于伪类在它的任何元素获取到焦点时都将被激活。当元素包含许多子组件的元素上谨慎使用该伪类。有了 :focus-within 之后,有一些常见的交互行为就变得非常的简单,特别是以前需要JavaScript的键盘事件的交互行为,我们都可以使用 :focus-within 来替代。接下来,咱们来看一些 :focus-within 的常见示例。


1、表格行的高亮

一个常见的例子,就是表格行高亮的行为,即鼠标悬浮在表格的行时,颜色变得高亮。这样的交互样式可以帮助有视力阻碍的用户能更好的阅读一个复杂的表格或长表格。因为突出的显示,可以使用这些用户更容易地跟踪他们当前正在阅读的表格行。以前常常实现的方式是通过 :hover 来改变表格行的样式,这种方案对于正常的用户而言是一件易事,但如果你的用户对于一些操作鼠标有阻碍的用户而言,那 :hover 就有点蛋疼了。如果你是追求完美的话,你可能会通过JavaScript的键盘事件给表格行添加样式。

那么有了 :focus-within 之后,我们就可以和JavaScript说拜拜。我们可以这样来设置样式:

上面的示例展示了如何使用 :focus-within 来突出表格的整个行。如果在特定的表格行中有一个可获取焦点的可用元素,这里所指的是通过键盘获取焦点。比如上面这个示例,表格中有 <a> 元素,你懂的, a 元素是可以通过键盘获取焦点的。

这个时候你只需要在样式中添加:

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}


2、下拉菜单

下拉菜单是我们最常的Web组件之一。当我第一次看到 :focus-within 这个伪类时,我想到的第一个使用场景就是下拉菜单。下拉菜单

上面的示例中,JavaScript是用来跟踪用户键盘焦点在一个导航下拉菜单中的。如果JavaScript检测到键盘焦点在一个链接上,那么给 .nav__list_drop 添加一个 .has-focus 类。当 li 有了 .has-focus 类时,他的子元素就会显示出来,也就是下拉菜单会显示出来。

这样的效果,我们可以直接通过 :focus-within 来取代JavaScript脚本的功能。使用 .nav__list__drop:focus-within 替代 .nav__list__drop.has-focus 。当你操作键盘,让下拉菜单项获得焦点时,就会显示下拉菜单。

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Off-screen Nav是在移动端上常见的一个效果。那么这个效果我们也可以通过 :focus-within 来实现。

总结

如果你熟悉 :focus 并不奇怪,但是你知道 :focus-within 的话,说明你在不断的关注CSS相关的新特性。当然这个属性再次刷新了CSS的世界真是奇怪。如果你感兴趣的话,不仿自己写写Demo。你会喜欢上这个属性的。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/973

关闭

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

css选择器中:first-child与:first-of-type

css选择器中:first-child与:first-of-type是比较容易混淆的概念,这里用案例介绍它们具体的区别。:first-child 选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。

CSS选择器_伪元素选择器之处理父元素高度及外边距溢出

最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。

了解CSS基本用法和选择器知识

相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果.jQuery的优点:1.简洁的语法,2.完善的事件处理机制

vue 选择器_实现scoped深度作用选择器

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件

巧用CSS属性值正则匹配选择器

这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符,分别表示前匹配、后匹配和任意匹配。利用这些选择器,纯CSS就可以做出很炫酷的功能。

CSS 选择器nth-child的几种用法

在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!