CSS魔法堂:稍稍深入伪类选择器
前言
过去零零星星地了解和使用:link
、::after
和content
等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。
伪类
伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。具体有:link
、:visited
、:hover
、:active
、:focus
、:focus-within
、:target
、:root
和:checked
。
HTMLAnchorElement
的4大经典伪类
:link
,用于设置链接初始状态时的样式;:visited
,用于设置链接被点击过后的样式;:hover
,用于设置鼠标悬停在链接上方时,链接的样式;:active
,用于设置鼠标按键按下,但未释放时,链接的样式。
想必各位都和我一样,最初接触到的就是上述4个伪类了吧?!而且还死机硬背它们的设置顺序(LVAH
)吧,哈哈。
设置当前目标元素样式
还记得URL中的井号吗?从井号(#
)开始到URL的末尾称为URL的hash或fragment,用于定位页面内某项资源。假设现在页面存在<h3 id="title">Target</h3>
的元素,那么只要地址栏输入#title
浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h3#title
位于可视区的特定位置。(注意:请不要和UI Routing混为一谈)
而上述这个被定位的页面资源,被称为目标元素或当前活动元素!可通过:target
设置其样式。
兼容性:IE9开始支持。
示例:
// 当前URL为http://foo.com#1
:target {
color: red;
}
.title{
color: blue;
&:target{
border: solid 1px red;
}
}
.title{I'm not target element.}
.title#1{Yes, I'm.}
设置元素获得焦点时的样式
:focus
用于设置元素处于focus状态下的样式。
兼容性:IE8开始支持。
那么哪些元素支持focus状态呢?那要先弄清楚通过哪些操作可能实现focus。
它们分别是:
- 鼠标点击;
- Tab键;
- 通过JavaScript的
HTMLElement.prototype.focus()
方法。
那么传统上支持focus状态的元素必定是a
、button
、input
、select
和textareas
.
而HTML5中增加当元素设置了contenteditable
或tabindex
属性时,该元素支持focus状态。
也就是符合以下选择器的元素均支持focus状态。
a,button,input,select,textarea,[contenteditable],[tabindex]
注意:若tabindex
属性值小于0,则无法通过Tab键获得焦点。但可以通过鼠标点击 或 脚本时元素获得焦点。
JS获取当前得到焦点的元素
/*
* 加载完成时默认返回body
* 若某元素获得焦点时,则返回该元素
*/
document.activeElement :: HTMLElement
另外还有一个让人误会的属性
// 用于检测文档是否得到焦点,即用户是否正在与页面交互
// 页面仅仅位于屏幕可视区域,而用户没有与之交互时返回false。
document.hasFocus :: Void -> Boolean
设置子元素获得焦点时,该元素的样式
:focus-within
,用于设置当子元素处于focus状态时,该元素的样式。
兼容性:Chrome63开始支持。
示例:二次确认密码时,密码框高亮
.form-control{
&:focus-within > input{
&:focus {
border: solid 1px skyblue;
}
&:not(:focus){
border: solid 1px orange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]
其他
:root
,用于设置<html>
元素的样式,从IE9开始支持。:checked
,用于设置单选和复选控件被选中的样式,从IE9开始支持。结合伪元素::before
和content
属性可以实现灵活高效的自定义单选和复选控件。:empty
,用于设置没有子节点的元素的样式。div{ }
为存在TEXT_NODE子节点的元素,而div{}
则为没有子节点的元素。:not
,作为谓语表达取反的语义。:placeholder-shown
,用于设置元素placeholder显示时的样式。
总结
尊重原创,转载请注明来自:https://www.cnblogs.com/fsjohnhuang/p/9551799.html _肥仔John
参考
https://css-tricks.com/almanac/selectors/f/focus/
https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector
CSS魔法堂:稍稍深入伪类选择器的更多相关文章
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- Css详解之(伪类选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS中before、after伪类选择器的巧用
大家好,今天给大家带来使用css中 before . after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么 选择器 作用 before 向选定的元素前插入 ...
- CSS魔法堂:一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
随机推荐
- zabbix监控Mysql中的QPS/TPS
今天我们来了解一下如何通过zabbix监控来监控我们msyql数据库中的TPS和QPS,提到这两个概念,我们先来了解究竟什么是QPS,TPS呢?它们是如何计算得到的呢?我们来看一下 QPS(Quest ...
- BZOJ1975 [Sdoi2010]魔法猪学院 k短路
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1975 题意概括 给出一个无向图,让你走不同的路径,从1到n,路径长度之和不超过E,求最大路径条数. ...
- IDEA链接mySql问题 : You have an error in your SQL syntax : 'OPTION SQL_SELECT_LIMIT=1000' (or 'OPTION SQL_SELECT_LIMIT=DEFAULT')
IDEA控制台错误信息: check the manual that corresponds to your MySQL server version for the right Code: 1064 ...
- 第一章:python基础语法| 字符编码| 条件语句...
1.编程语言介绍 编程就是写代码,让计算机帮你做事情.计算机底层是电路,只认识二进制0和1.机器语言&汇编语言语言进化历史:机器.汇编.高级.机器语言只接受二进制代码:汇编语言是采用英文缩写的 ...
- Trident中的DRPC实现
一:介绍 1.说明 Storm里面引入DRPC主要是利用storm的实时计算能力来并行化CPU intensive的计算.DRPC的storm topology以函数的参数流作为输入,而把这些函数调用 ...
- 在jsp页面上方定义<style> 可以自定义class的样式
<style>.border-orange{ border:1px solid orange; width:120px; box-sizing: border-box; margin-bo ...
- Square Destroyer-POJ 1084 (IDA*)
Description The left figure below shows a complete 3*3 grid made with 2*(3*4) (=24) matchsticks. The ...
- Codeforces 1130D1 Toy Train (Simplified) (思维)【贪心】
<题目链接> 题目大意: 有一个的环形火车站,其中有$[1,n] n$个站台,站台上能够放糖果,火车只能朝一个方向移动,如果火车在站台$i$,那么下一秒就会在$i+1$站(如果$i=n$, ...
- Codeforces 1105C Ayoub and Lost Array (计数DP)
<题目链接> 题目大意: 有一个长度为 n 的数列的未知数列,数列的每一个数的值都在区间 [l,r] 的范围内.现在问你能够构成多少个这样的数组,使得数组内的所有数的和能够被 3 整除. ...
- shell编程第三天