首页 > 其他分享 >focus-within基本用法

focus-within基本用法

时间:2023-08-11 19:23:59浏览次数:38  
标签:within 聚焦 元素 focus 用法 xx 选择器

xx:focus-within

xx的子元素被聚焦,则选择器触发,可实现父选择器功能

除了 <button>,<input>,<select>,<a> 这些可聚焦的元素,

可通过 tab-index 或 contenteditable 这些属性使得元素可聚焦

这样任何元素都能触发 focus-within 选择器

由于任何元素都可触发 html的 focus-within,可通过html可指向任何子元素

html:focus-within xx {

}

如此,a元素 聚焦可触发页面上任何 b元素 改变样式

元素如何成为焦点有多种方式,它可以被点击或轻触,或通过其他方式导航,甚至通过JavaScript聚焦(document.querySelector("xx").focus())

 

 

 

参考:详细了解CSS :focus-within伪类及其交互应用 

标签:within,聚焦,元素,focus,用法,xx,选择器
From: https://www.cnblogs.com/mengff/p/17623776.html

相关文章

  • Room组件的用法
    一.Android官方ORM数据库RoomAndroid采用Sqlite作为数据库存储。但由于Sqlite代码写起来繁琐且容易出错,因此Google推出了Room,其实Room就是在Sqlite上面再封装了一层。下面是Room的架构图:要想更好地理解上面的图,我们先要理解几个概念:Entity和DaoEntity......
  • 递归的用法
    递归主要有两难:1.判断递归方法的执行主体,具体从入参来看: 例如第一个递归方法入参是文件夹,确保了是可以保存文件。那么执行的时候就不需要判断入参是否是文件夹;第二个递归方法的入参是文件,不能确定是否是文件夹,需要第一步进行判断。但是两种方法都实现了查找文件夹下的文件的......
  • max-element的min-element的基本用法
    转载自https://blog.csdn.net/qq_37978559/article/details/109782755?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169173063816800197041324%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169173063816800197041324&biz......
  • 【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(高级
    推荐超值课程:点击获取对于Httpclient请求机制进行设置操作处理。@Body注解申明一个请求体模板,模板中可以带有参数,与方法中@Param注解申明的参数相匹配,使用方法如下:interfaceLoginClient{voidlogin(Stringuser,Stringpassword);}...client.login("denominato......
  • WEB自动化-Allure报告-Allure安装和简单用法
    WEB自动化测试可以借助Allure生成美观的测试报告。1、安装工具及配置环境变量1.安装JDK1.8才可运行allure,直接百度,一大堆2.下载Allure的安装包(版本号:2.13.5)https://repo.maven.apache.org/maven2/io/qameta/allure/allure-commandline/3.解压Allure压缩包......
  • SQL JOIN的用法,你会了吗?
    SQLJOIN是在关系型数据库中常用的操作,用于将两个或多个表中的数据合并起来,以满足查询需求。本文将介绍SQLJOIN的基本概念、不同类型的JOIN,以及使用示例。SQLJOIN的概念在关系型数据库中,数据通常分布在多个表中,并且这些表之间存在关联。SQLJOIN允许我们基于关联条件将这些......
  • c++枚举详细介绍以及具体用法
    C++中的枚举(Enumeration)是一种用于定义命名常量集合的数据类型。枚举可以提高代码的可读性和可维护性,让您可以使用有意义的名称来表示特定的取值,而不必使用原始的数字常量。枚举的基本语法:enumEnumName{Value1,Value2,//...};EnumName是枚举类型的名称......
  • LiveData的用法
    一.实时数据LiveData在上一节中,我们学习了ViewModel,了解到ViewModel的主要作用是存放页面所需要的各种数据。我们在示例代码中定义了接口,当数据发生变化的时候,采用接口的方式实现对页面的通知。但是这种方式是有缺陷的,当要存储的数据非常多的时候,就要定义大量的接口,代码会显......
  • 【Nginx用法】nginx location正则表达式写法,详解Nginx location 匹配规则(很详细哦)
    本文目录一、常用规则 二、实际使用建议三、Flag标志位四、If判断指令五、全局变量六、常用正则七、Rewrite规则八、Rewrite实例8.1实例一8.2实例二九、项目实例9.1项目一9.2项目实战作为一名Java开发人员,有些东西不经常使用,很容易忘记,好比nginx配置内容,以下内容是记录了公司......
  • Go语言中省略号用法大全
    Go语言中的ellipsis(即三个连续的点...)确实有几种用途。下面是这些用途的总结:定义变参函数(VariadicFunctions):Ellipsis用于函数定义时,表明该函数可以接受任意数量的参数。这些参数会被当作一个slice来处理。例如:funcsum(nums...int)int{total:=0for_,......