CSS 伪类
Link
The :link
CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover
, :active
or :visited
. In order to appropriately style links, you need to put the :link
rule before the other ones, as defined by the LVHA-order: :link
— :visited
— :hover
— :active
. The :focus
pseudo-class is usually placed right before or right after :hover
, depending on the expected effect.
Visited
The :visited
CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link
, :hover
, and :active
, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited
rule after the :link
rule but before the other ones, defined in the LVHA-order: :link
— :visited
— :hover
— :active
.
Active
:active
CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 :active
伪类通常用来匹配tab键交互。通常用于但并不限于 <a>
和 <button>
HTML元素。
这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 :link
,:hover
和 :visited
。为了正常加上样式,需要把 :active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为
LVHA顺序: :link
— :visited
— :hover
— :active。
Hover:
:hover
CSS伪类适用于用户使用指示设备虚指一个元素(没有激活它)的情况。这个样式会被任何与链接相关的伪类重写,像:link
, :visited
, 和 :active
等。为了确保生效,:hover规则需要放在:link和:visited规则之后,但是在:active规则之前,按照LVHA的循顺序声明:link-:visited-:hover-:active。
:hover伪类可以任何伪元素上使用。
用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标(鼠标指针)悬停在元素上时提供关联的样式。
Focus
CSS伪类 :focus 在一个元素成为焦点时生效,用户可以通过键盘或鼠标激活焦点(例如:一次表单输入)。
First-Child
CSS伪类:first-child
代表了某个元素,这个元素是它父元素的的第一个子元素.
Nth-Child
CSS 伪类 :nth-child(an+b)
匹配在文档树中前面有an+b-1
个兄弟元素的元素,此时n
大于或等于0,并且该元素具有父元素。简而言之,该选择器匹配多个位置满足an+b
的子元素。
示例:
1n+0
,或n
,匹配每一个子元素。2n+0
,或2n
,匹配位置为2、4、6、8…的子元素,该表达式与关键字even
等价。2n+1
匹配位置为1、3、5、7…的子元素、该表达式与关键字odd
等价。3n+4
匹配位置为4、7、10、13…的子元素。
a
与b
的值必须为整数,第一个子元素的位置为1
,也就是说,该伪类匹配所有位置落在集合{an+b;n=0,1,2,…}
中的元素。经常用于表格的隔行匹配。
Nth-Last-Child
伪类:nth-last-child
匹配在文档树中后面有an+b-1
个兄弟元素的元素,此时n
大于或等于0
,并且该元素具有父元素。
实际上,该伪类的作用与:nth-child
相同,但是其是从后往前选择元素,而不是从前往后。
Nth-Of-Type
:nth-of-type
CSS 伪类 匹配一个在文档树中位置为an+b-1 且和伪元素前名字一样
的元素, 此时n
大于或等于0,并且该元素具有父元素。参见 :nth-child
关于伪元素参数语法详细的说明. 如果你想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素,这个伪元素更加灵活实用.
First-Of-Type
:first-of-type
CSS 伪类匹配父元素的所有该子元素类型中第一个出现的元素.
Last-Of-Type
:last-of-type
CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。
Empty
:empty
伪类 代表没有子元素的元素。 这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。
Target
伪类选择器 :target 代表一个特殊的元素,若是谈论区别的话,它需要一个id去匹配
文档URI的片段标识符.
带有片段标识符的URIs链接到文档中某一个元素 ,被称为是目标元素。例如,这里有一个URI 指向一个叫section2锚点:http://example.com/folder/document.html
#section2
这个锚点可以是任意一个拥有id属性的元素, e.g. <h1 id="section2"> 在我们的例子中,目标元素h1通过伪类选择器:target可以这样被表述:
Checked
:checked
CSS 伪类选择器表示任何radio(<input type="radio">
), checkbox (<input type="checkbox">
) 或option HTML元素("option")) 在一个HTML元素("select") 元素选中或连接一个状态。用户可以改变在该元素上的状态,或选择一个不同的值,在这种情况下:checked伪类
不再适应于这个元素,但仍是有关的一个。
Enabled
CSS 伪类 :enabled
表示任何启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入)或获取焦点,则该元素是启用的。元素还有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。
Disabled
:disabled
是 CSS 伪类,表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态(enabled state),在启用状态下,元素可以被激活或获取焦点。
CSS 伪类的更多相关文章
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS伪类
CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
随机推荐
- Crumpet – 使用很简单的响应式前端开发框架
Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...
- jQuery.queue源码分析
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 队列是一种特殊的线性表,它的特殊之处在于他只允许在头部进行删除,在尾部进行插入.常用来表示先进先出的操作(FI ...
- Windows Azure HandBook (9) Azure性能测试(2)
<Windows Azure Platform 系列文章目录> 在上一节中,笔者介绍了我们在Azure性能测试之前,首先需要提交<渗透性测试表> Windows Azure H ...
- .Net魔法堂:开启IIS的WebGarden、WebFarm和StateServer之旅
前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被投诉系统慢,报表下载不了等问题.究其原因,原来NLB采用锁定sessionI ...
- 【Android】你应该知道的调试神器----adb
最近跟着一个前辈在做TV应用,因为不能通过usb连接调试,接触到了adb,突然间觉得自己似乎发现了另外一个世界,借助adb shell命令对应用进行调试,简直方便得不行.更重要的是,这是命令行操作啊! ...
- Clr编写Insert Triggr
在CLR编写一个插入娄据的触发器. 这个触发器是当对表插入数据时,即时把刚才插入的数据显示出来: 可复制代码: public static void tri_RetrieveJustInsertedD ...
- 基于Winform的.cs文件命名空间排序及注释批量处理工具
公司里每个程序员在命名空间的排序和注释上都有很多的不同. 杂乱的命名空间: using System; using System.Collections.Generic; using Autodesk ...
- mysql常用函数参考
mysql常用函数参考 对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的最左面字符的ASCII代码值.如果str是空字符串,返回0.如果str是NULL, ...
- 设置Xshell中支持中文
执行echo $LANG命令输出的是当前的编码方式,执行locale命令得到系统中所有可用的编码方式.要让Xshell不显示乱码,则要将编码方式改为UTF-8. 在Xshell中[file]-> ...
- JavaWeb前端基础复习笔记系列 一
课程:孔浩前端视频教程(CMS内容管理系统case) 1.背景知识 ASPCMS,是一个基于asp的CMS.类似于Jeecms是基于Java的.aspcms:http://www.aspcms.com ...