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…的子元素。

ab的值必须为整数,第一个子元素的位置为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 伪类的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  3. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  4. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  5. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

  6. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  7. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  8. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  9. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

随机推荐

  1. Spark入门实战系列--8.Spark MLlib(上)--机器学习及SparkMLlib简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .机器学习概念 1.1 机器学习的定义 在维基百科上对机器学习提出以下几种定义: l“机器学 ...

  2. Jeet – 先进,直观,灵活的 CSS 网格系统

    Jeet 是一个先进的,直观的 CSS 网格系统.通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格.让你用更少的代码,更快的速度构建页面布局. 您 ...

  3. .net, java, c/c++ 和钱

    .net, java, c/c++ 和钱 最近有一段时间没有写博客了,原因是没时间,项目需要在短时间内增加一些安全性的支持,为此我花了近两个月的时间做基础研究,现在路已经跑通了,稍闲下来,看到园子里面 ...

  4. 关于DataTable的两篇基础文章

    DataTable有的时候还是很有用的.记录两篇不错的文章,当字典 1.http://blog.csdn.net/imagse/article/details/3085870 2.https://ms ...

  5. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  6. 基于caffe的艺术迁移学习 style-transfer-windows+caffe

    这个是在去年微博里面非常流行的,在git_hub上的代码是https://github.com/fzliu/style-transfer 比如这是梵高的画 这是你自己的照片 然后你想生成这样 怎么实现 ...

  7. JavaScript之旅(三)

    JavaScript之旅(三) 三.函数 在JavaScript中,定义函数的方式如下: function abs(x) { ... return ...; } 如果没有return,返回结果为und ...

  8. 怎么让composer加速

    composer install 为什么这么慢? 下面是一个composer install(在没有composer cache的情况下)做的所有事情: [vagrant@localhost comp ...

  9. 《ASP.NET SignalR系列》第一课 认识SignalR

    从现在开始相关文章请到: http://lko2o.com/moon 一.概述 ASP.NET signalr对ASP.NET开发者来说是一个新的程序库,它能让我们更加容易便捷地开发实时通信功能; s ...

  10. 【Swift学习】Swift编程之旅---类和结构体(十三)

    与其他编程语言所不同的是,Swift 并不要求你为自定义类和结构去创建独立的接口和实现文件.你所要做的是在一个单一文件中定义一个类或者结构体,系统将会自动生成面向其它代码的外部接口. 注意:通常一个类 ...