今天小编给大家分享一下CSS中的focus-within如何用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参 香港云主机考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。:focus-within是什么在CSS中 :focus-within 是一个伪类，现在已经被列入到CSS选择器中（CSS Level 4 selector）。他就像你知道的 :focus 或者 :hover 。 :focus-within 能非常方便处理获取焦点状态。当元素本身或其后代元素获得焦点时， :focus-within 伪类的元素就会有效。如果文字不好理解，咱们先来看一个简单的示例：上面是一个简单的表单，有一个 input 表单控件。上面的示例中， .form-group 得到焦点的时候， border-color 颜色换成了 #000 。但这不意味着接收键盘的焦点，那是因为 看到上面的示例，是不是觉得好神奇。在以前要实现类似的效果，我们需要借助JavaScript的脚本。通过 .form-group 的后代元素的鼠标或键盘事件，然后给其父元素（或祖先元素，添加对应的样式）。:focus-within的使用场景:focus-within 非常强大，主要是由于伪类在它的任何元素获取到焦点时都将被激活。当元素包含许多子组件的元素上谨慎使用该伪类。有了 :focus-within 之后，有一些常见的交互行为就变得非常的简单，特别是以前需要JavaScript的键盘事件的交互行为，我们都可以使用 :focus-within 来替代。接下来，咱们来看一些 :focus-within 的常见示例。表格行的高亮一个常见的例子，就是表格行高亮的行为，即鼠标悬浮在表格的行时，颜色变得高亮。这样的交互样式可以帮助有视力阻碍的用户能更好的阅读一个复杂的表格或长表格。因为突出的显示，可以使用这些用户更容易地跟踪他们当前正在阅读的表格行。以前常常实现的方式是通过 :hover 来改变表格行的样式，这种方案对于正常的用户而言是一件易事，但如果你的用户对于一些操作鼠标有阻碍的用户而言，那 :hover 就有点蛋疼了。如果你是追求完美的话，你可能会通过JavaScript的键盘事件给表格行添加样式。那么有了 :focus-within 之后，我们就可以和JavaScript说拜拜。我们可以这样来设置样式：上面的示例展示了如何使用 :focus-within 来突出表格的整个行。如果在特定的表格行中有一个可获取焦点的可用元素，这里所指的是通过键盘获取焦点。比如上面这个示例，表格中有 元素，你懂的， a 元素是可以通过键盘获取焦点的。这个时候你只需要在样式中添加：下拉菜单下拉菜单是我们最常的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 。当你操作键盘，让下拉菜单项获得焦点时，就会显示下拉菜单。Off-screen NavOff-screen Nav是在移动端上常见的一个效果。那么这个效果我们也可以通过 :focus-within 来实现。详细代码可以看下面这个示例：浏览器兼容性:focus-within 虽然很有意思，但很多同学担心它的兼容性。通过Caniuse，我们可以看到浏览器对其支持度情况：以上就是“CSS中的focus-within如何用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注开发云行业资讯频道。推荐内容：css中:focus-within怎么用免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@if98.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
这篇文章主要讲解了“电脑显示器一闪一闪黑屏如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“电脑显示器一闪一闪黑屏如何解决”吧！软件问题：一、检查显示刷新率设置是否正确1.在桌面空白处点击鼠标右键，选择显示…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
