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 ...
随机推荐
- Python编码问题整理
认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...
- .NET知识结构
.NET知识结构 .NET介绍 微软.NET战略及技术体系,.NET Framework框架类库(FCL),公共语言运行时(CLR),通用类型系统(CTS),公共语言规范(CLS),程序集(Assem ...
- SQL--类型转换
Convert函数和Cast函数都是转化函数,效果是一样的. cast函数,转化,如果转化之后,年龄还是Null的话,就显示为“未知” Convert函数和Cast函数都是转化函数,效果是一样的.
- SQL 语句的TOP,Distinct语句
--Top获取前几条数据,一般都与Order By连用 SELECT TOP 3 * FROM dbo.MyStudent --查询Student表中前3条所有的数据 SELECT TOP 3 S_N ...
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
- js带上框架和防止被iframe的代码
1.永远都会带着框架<script language="JavaScript"><!--if (window == top)top.location.href = ...
- Nancy 学习-身份认证(Forms authentication) 继续跨平台
开源 示例代码:https://github.com/linezero/NancyDemo 上篇讲解Nancy的Basic Authentication,现在来学习Nancy 的Forms身份认证. ...
- C# winform控件之listview学习积累
//1.用key给ListViewItem 的 SubItems赋值 ListViewItem listViewItem= listView1.Items.Add("第一列文字") ...
- QTableWidget的美化
FriendTable->setFrameShape(QFrame::NoFrame); //设置边框 FriendTable->setHorizontalHeaderLabels( ...
- TCP - 流量控制 and 拥塞控制
1. 流量控制 - Flow Control 序言:数据的传送与接收过程当中很可能出现收方来不及接收的情况,这时就需要对发方进行控制以免数据丢失.利用滑动窗口机制可以很方便的在TCP连接上实现对发 ...