文档章节

css伪类选择器

省委书记沙瑞金
 省委书记沙瑞金
发布于 2016/11/08 15:31
字数 1391
阅读 119
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。

在大多情况下,伪类选择器是非常有用的。其中css2 和css3 都支持伪类选择器,只是相对来说,css2支持的可能比css3的少,除了ie浏览器外,其他大部分浏览器都支持伪类选择器,在ie浏览器中,包括ie8也是支持少量的伪类选择器的。ie9 及以上浏览器,基本上支持所有的伪类选择器,下面,让我们看看所有的伪类选择器。当然,伪类选择器并没有那么多。

连接的伪类选择器

连接的伪类选择器包括以下几个(:link、:visited 、:hover 、:active)

:link 这个选择器也许是最容易引起混淆的一个连接的伪类选择器,不是所有的<a>都是连接么?但是并不是这样的,这个伪类选择器只选择那些没有添加href属性的a标签的,这样看来这个伪类选择器是不是就和[href]这个选择器很相似。

:visited 这个选择器选择那些在当前浏览器中那些通过本a标签进入过的地址的标签。

:hover 这个就不用说了,这个大家用的很广的,这个伪类选择器选择那些通过鼠标悬停状态下的连接。

:active 这个伪类选择器选择那些,鼠标左键按下,但是未弹起状态下的标签。同样,这个伪类在h5中选择那些按钮按下的状态。

input标签和连接的伪类选择器

这个包括比较多,下面我们来一一介绍。

:focus 对于连接 来说:hover这个伪类是非常有用的,但是他不能够选择那些获取焦点状态下的元素(什么是获取焦点,获取焦点就是我们能够通过键盘来进行操作,比如说,input,我的可以通过键盘输入,这种状态就是获取焦点的状态;按钮,我们能够通过enter来触发事件这个状态就是我们给按钮获取了焦点,对于a标签来说,如果获取焦点了,我们就能够通过enter来触发他的连接事件。)。所一说,:focus伪类是选择那些当前在焦点状态下的元素。

:target  target这个伪类选择器应该结合着标签的id进行使用,或者是与当前连接中的的hash进行匹配的id。

:enabled 这个选择那些可以使用的input标签,其中可以使用包括enabled和ready这两中属性的input标签。

:disabled 这个选择器选择那个有disabled属性的input标签,部分浏览器,会把input:disabled标签变成灰色,所以我们在写css的时候需要控制浏览器的默认状态。

:checked 这个伪类选择器选择input[type="checkbox"],input[type="radio"]的选中状态。

:indeterminate 这个选择器选择radio按钮没有被选择并且加加载时候没有进行默认设置的状态。这个可能比较不太好理解。

位置、序号伪类选择器

:root 这个伪类选择器选择document的根节点,通常情况下,我们的document的根节点就是<html>,但是也有一些情况下,有人会用html进行标记。这时候其选择的就不是<html>标签了。

:firsct-child 这个伪类用于选取属于其父元素的首个子元素的指定选择器。

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

:nth-child(N) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

:nth-of-type() 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

:nth-last-child(n) 择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n 可以是数字、关键词或公式。

:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

具体的可以通过下面这个图,看起来会比较直观点儿

关系伪类选择器

:not() 选择器匹配非指定元素/选择器的每个元素。比如说input:not([disabled])选择可用的input标签。

:empty() 选择哪些内容为空的标签,比如说<p></p>

文字类的伪类选择器

::first-letter 这个选择元素内的第一汉字或者是字母。

::first-line 这个选择器选择那些元素内的第一行的内容。

上面就是常用的伪类选择器,可能还有一些没有被收录进来。

© 著作权归作者所有

省委书记沙瑞金
粉丝 22
博文 48
码字总数 54918
作品 0
海淀
前端工程师
私信 提问
CSS 选择器[下]

伪类选择器总汇 结构性伪类选择器 UI伪类选择器 动态伪类选择器 其他伪类选择器 一、伪类选择器汇总 伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器。 二、结构性伪...

xiaoxiaobukuang
2017/10/23
0
0
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
详细解读 CSS 优先级,终于忘不掉了

CSS 优先级注意事项 1、优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。 2、而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,C...

云影sky
11/18
0
0
[译]19个CSS level 4 选择器

原文作者:Marouen Mhiri 原文链接:19 CSS-Level-4 selectors(原文标题是20,但实际只有19个) 译者:陈大鱼头 推荐理由:因为喜欢CSS啊 你不得不 💌 CSS 以下所有选择器的兼容性表格内容...

陈大鱼头
05/21
0
0
你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英...

石佛慈悲
2013/12/05
68
0

没有更多内容

加载失败,请刷新页面

加载更多

006-ELK的二进制安装

二进制安装ELKstack 本次搭建属于单点,在同一台机器上进行安装 基础组件部署 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo wget -O /etc/yu...

伟大源于勇敢的开始
今天
5
0
OSChina 周四乱弹 —— 浙江台的电话号码倒是记得挺牢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Out On The Streets》 一直不理解北欧人对重金属和死亡摇滚的热情,听完这首歌好像理解了。#今日歌曲推荐# 《Out On The Stre...

小小编辑
今天
15
1
Leetcode PHP题解--D121 21. Merge Two Sorted Lists

D121 21. Merge Two Sorted Lists 题目链接 21. Merge Two Sorted Lists 题目分析 合并两个有序链表。 思路 逐个遍历两个链表,把小的数字塞入数组里。之后再拼起来。 最终代码 <?php/** *...

skys215
今天
6
0
mars-config 动态配置管理

mars-config 码云地址:https://gitee.com/fashionbrot/mars-config 介绍 spring mvc 、springboot 动态配置系统。http 轮训方式 更新 动态配置 软件架构 软件架构说明 后端使用技术 :sprin...

fashionbrot
今天
17
0
女朋友玩吃鸡手游被开挂老哥骗炮,我见义勇为将骗子绳之以法

大家好,我是乔哥。 晚上10点以后下班后我回到自如出租房里面,开始处理公众号粉丝发来的消息,一条一条处理,突然看到了这么几条消息,吸引了我的眼球: 然后我就和这位女粉丝小红(化名)聊...

gzc426
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部