首页 > 其他分享 >伪类选择器:focus-within

伪类选择器:focus-within

时间:2023-02-21 10:57:48浏览次数:29  
标签:within 伪类 焦点 后代 focus 选择器

:focus-within

它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点,这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within。

可以用:focus-within写按钮的点击边线效果:

代码:

.label:focus-within {
    outline: 3px solid rgba(0, 141, 255, 0.06);
}

即可写出点击扩大边框效果

标签:within,伪类,焦点,后代,focus,选择器
From: https://www.cnblogs.com/Simoon/p/17140137.html

相关文章

  • jQuery基础 (一)——样式篇(jQuery选择器)
    一、选择器类型id选择器class选择器元素选择器层级选择器全选择器(*选择器)二、有几种方式可以隐藏一个元素:CSSdisplay的值是none。type="hidden"的表单元素。宽度和高度都显......
  • CSS概念与CSS选择器
    CSS简述CSS被称为级联样式表或者CSS样式表。CSS也是一种标记语言。CSS主要用于设置HTML页面中的:1.文本内容(字体,大小,对齐方式等),2.图片的外形(宽高,边框样式,边距等),3.版......
  • DateTimePicker 日期时间选择器 + mybatis-plus 传参后端查询 传值自定义list,后端再
    前端<el-form-itemlabel="创建时间"prop="extendate"><el-date-pickerv-model="queryParams.extendate"......
  • javaEE003.06 jQuery:过滤选择器3:表单过滤选择器&表单对象属性过滤选择器
    文章目录​​前言​​​​一、代码模板​​​​二、过滤选择器——表单过滤选择器​​​​1.表单过滤选择器​​​​2.表单对象属性过滤选择器​​​​3.具体需求​​​​总......
  • 级联选择器回显
    1、级联选择器回显通过css样式回显     ......
  • Antd里面的Select选择器的一些非常规用法
    Select选择器 检索的时候是默认按照id检索的 我们通常用label检索的 optionFilterProp搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进......
  • CSS简单选择器
    CSS选择器,先来学习简单选择器。CSS选择器是用来“寻找”或“选择”,你想要定义样式的HTML元素的。我们前面学习过一个最简单的选择器——比如,这个H1元素就是选择器,我们称之为......
  • 属性选择器
    属性选择器1属性名称选择器语法:$("A[属性名]")包含指定属性的选择器2属性选择器语法:$("A[属性名=‘值’]")包含指定属性等于指定值的选......
  • 基本选择器 层级选择器
    选择器:筛选具有相似特征的元素(标签)1基本选择器1标签选择器(元素选择器)语法:$("html标签名)获得所有匹配标签名称的于元素2id选择......
  • laydate插件实现时间选择器
    文章目录​​一、前言:​​​​二、年选择器:​​​​1、引入js和css文件:​​​​2、写一个input标签:​​​​3、执行一个laydate实例​​​​4、页面效果:​​​​三、年月选......