CSS 伪选择器 focus-within 介绍

更新日期: 2020-02-26阅读: 1.7k标签: 选择器

css中的 :focus-within 伪选择器可有点“不寻常”,尽管它的名称看上去很简单,而且相当直观。但它的解释是:选择一个包含具有:focus 的任何子元素的元素。有点绕是不是,但仔细读应该也能理解,下面通过具体的例子你就更能理解了。

form:focus-within {
  background: lightyellow;
}

它是这样工作的:

<form action="#">
  <input type="text">
</form>

当form的子元素input获得焦点时,form 就会被选中。

我说“不寻常”是因为在CSS中,根据子元素的存在或状态来选择父元素并不常见,当然也是有用的。

看下面是一个例子:

<form action="#">
  <h2>这是一个表单</h2>
  <div>
    <label class="desc" id="title1" for="Field1">姓名</label>
    <div>
      <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
    </div>
  </div>
  <div>
    <label class="desc" id="title3" for="Field3">邮箱</label>
    <div>
      <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
   </div>
  </div>
  <div>
    <label class="desc" id="title4" for="Field4">内容</label>
    <div>
      <textarea id="Field4" name="Field4" spellcheck="true" rows="3" cols="50" tabindex="4"></textarea>
    </div>
  </div>
  <div>
    <fieldset>
      <legend id="title5" class="desc">请选择</legend>
      <div>
      	<input id="radioDefault_5" name="Field5" type="hidden" value="">
      	<div>
      		<input id="Field5_0" name="Field5" type="radio" value="First Choice" tabindex="5" checked="checked">
      		<label class="choice" for="Field5_0">First Choice</label>
      	</div>
        <div>
        	<input id="Field5_1" name="Field5" type="radio" value="Second Choice" tabindex="6">
        	<label class="choice" for="Field5_1">Second Choice</label>
        </div>
      </div>
    </fieldset>
  </div>
  <div>
    <fieldset>
      <legend id="title6" class="desc">请选择</legend>
      <div>
      <div>
      	<input id="Field6" name="Field6" type="checkbox" value="First Choice" tabindex="8">
      	<label class="choice" for="Field6">First Choice</label>
      </div>
      <div>
      	<input id="Field7" name="Field7" type="checkbox" value="Second Choice" tabindex="9">
      	<label class="choice" for="Field7">Second Choice</label>
      </div>
    </fieldset>
  </div>
  <div>
    <label class="desc" id="title106" for="Field106">请选择</label>
    <div>
    <select id="Field106" name="Field106" class="field select medium" tabindex="11">
      <option value="First Choice">First Choice</option>
      <option value="Second Choice">Second Choice</option>
    </select>
    </div>
  </div>
</form>
form:focus-within {
  background: #f9f98b;
}
form header {
  padding: 2rem;
}
form header div {
  font-size: 90%;
  color: #999;
}
form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 0.5rem 2rem;
}
form > div:last-child {
  padding-bottom: 2rem;
}
form > div:focus-within {
  background: #a1c084;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 15%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 85%;
  float: right;
}
form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #4697e4;
}

注意上面的示例在整个表单和其内部的div上使用了:focus-within。子元素通过任意方式获得焦点都将触发:focus-within。例如,如果一个元素有tab-index属性或contenteditable属性时,那么它就是一个可聚焦的元素。元素如何成为焦点也不重要,它可以被点击或轻触,或通过其他方式导航,甚至通过JavaScript聚焦,比如:

document.querySelector("input").focus();

下面是:focus-within在各大浏览器上的支持情况:


可见截止目前大部门主流浏览器都已经支持了。


链接: https://www.fly63.com/article/detial/9219

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

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

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

css 选择器符号

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

css选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

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

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

点击更多...

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