CSS伪类

伪类的诞生都是源于在HTML文档树里部分信息没有办法被描述,比如CSS中没有"段落的第一行" "文章首字母"等等的选择器,但是这在许多出版情景下又是必须要求的,所以CSS伪类诞生了

表示状态:
语法:选择器:伪类型{样式}
锚伪类:(未被访问状态、已被访问状态、鼠标悬停状态、活动状态)
:1ink未被访问的链接添加样式
:visited 向已被访问链接添加样式
:hover向鼠标悬停时向元素添加样式
:active向被激活的元素添加样式
:focus向拥有键盘输入焦点的元素添加样式

结构化伪类:
:first-child向第一个子元素添加样式
:not否定伪类,用于匹配不符合参数选择器的元素;
:last-child匹配元素的最后一个子元素;
:first-of-type匹配属于其父元素的首个特定类型的子元素的每个元素;
:last-of-type匹配元素的最后一个子元素;
:nth-child根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数(an+b最大数为匹配元素的个数);
:nth-last-child与:nth-child相似,不同之处在于它是从最后一个子元素开始计数的;
:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素;
:nth-last-of-type与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的;
:only-child当元素是其父元素中唯一一个子元素时,:only-child匹配该元素;
:only-of-type当元素是其父元素中唯一一个特定类型的子元素时,:only-child匹配该元素;
:target当URL带有锚名称,指向文档内某个具体的元素时,:target匹配该元素;

表单相关伪类:
:checked匹配被选中的input元素,这个input元素包括radio和checkbox;
:default匹配默认选中的元素,例如:提交按钮总是表单的默认按钮;
:disabled匹配禁用的表单元素;
:empty匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格,则:empty不能匹配这个元素;
:enabled匹配没有设置disabled属性的表单元素;
:in-range匹配在指定区域内元素;
:out-of-range与:in-range相反,它匹配不在指定区域内的元素;
indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框;
:valid匹配条件验证正确的表单元素;
:invalid与:valid相反,匹配条件验证错误的表单元素;
:optional匹配是具有optional属性的表单元素。当表单元素没有设置为required时,即为optional属性;
:required匹配设置了required属性的表单元素;
:read-write匹配处于编辑状态的元素。input,textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态;
:scope(处于试验阶段)  匹配处于style作用域下的元素。当style没有设置scope属性时,style内的样式会对整个html起作用;

语言相关伪类:
:dir(处于实验阶段)匹配指定阅读方向的元素,当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种:ltr(从左往右)和rtl(从右往左)。目前,只有火狐浏览器支持:dir伪类,并在火狐浏览器中使用时需要添加前缀( -moz-dir() );
:lang匹配设置了特定语言的元素,设置特定语言可以通过为了HTML元素设置lang=””属性,设置meta元素的charset=””属性,或者是在http头部上设置语言属性;

其他伪类:
:root匹配文档的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素则可能是其他元素;
:fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式,而是通过Javascript的Fullscreen API来打开的,不同的浏览器有不同的Fullscreen  API。目前,:fullscreen需要添加前缀才能使用;

注:伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 beforeafter 的。诸如 <img> 、<input>、<iframe>这几个标签是不支持类似 img::before 这样使用。究其原因,要想要标签支持伪元素,需要这个元素是要可以插入内容的,也就是说这个元素要是一个容器,而 input,img,iframe 等元素都不能包含其他元素,所以不能通过伪元素插入内容

最后修改:2019 年 08 月 10 日 05 : 00 PM
如果觉得我的文章对你有帮助,可以给我来杯卡布其诺

发表评论