placeholder-shown
当input或者textarea元素拥有placeholder属性的时候可使用该伪类,选择所有显示占位符(placeholder)的元素。当placeholder的内容显示的时候拥有该伪类。比较直观的感受就是当用户框输入内容时该伪类不在生效。
MDN
:传送门
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
以下简单的演示placeholder-shown
这个伪类的使用:
<!-- DOM 结构 -->
<div>
<input type="text" placeholder="default content in text input">
</div>
<div>
<textarea placeholder="default content in textarea"></textarea>
</div>
// scss 样式
// 选择所有显示占位符(placeholder)的元素
textarea,
input[type="text"] {
width: 100%;
max-width: 220px;
padding: 8px 12px;
outline: none;
border-radius: 6px;
border: 2px solid seagreen;
transition: all .4s ease;
&:placeholder-shown { // 当placeholder的值显示的伪类
border-color: slateblue;
border-radius: 50px;
}
}
textarea {
width: 100%;
max-width: 100%;
min-height: 150px;
margin-top: 25px;
border-radius: 3px;
&:placeholder-shown {
border-radius: 3px;
}
}
focus-within
这个伪类是当后代元素获取焦点时生效,任何一个后代元素获取焦点都会让该伪类生效。
MDN
:传送门
:focus-within 是一个CSS 伪类 ,表示一个元素获得焦点,或,该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代匹配 :focus 伪类。(shadow DOM 树中的后代也包括在内)
以下简单的演示focus-within
这个伪类的使用:
<!-- DOM 结构 -->
<div class="focus-box">
<div>
<input type="text" placeholder="default content">
</div>
<div>
<button class="button--green">Click Me</button>
<span>
当子元素获取焦点时,父元素的focus-within伪类生效</span>
</div>
</div>
// scss 样式
// 当 <div> 的某个后代获得焦点时,匹配 <div>
.focus-box {
padding: 50px;
border: 5px dotted slateblue;
transition: all .4s ease;
&:focus-within {
border-color: seagreen;
border-radius: 100px;
}
}
可以使用这两个伪类实现很多效果,诸如折叠导航,二级导航等。等待小伙伴自己去开发吧,不使用JavaScript就可以实现很多效果,大大提高了页面的渲染效率,降低了浏览器的性能消耗。