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 ...
随机推荐
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- DNS解析全过程及原理
DNS解析原理及过程. 当用户访问我们网站一个网页时,他需要经过以下步骤: 1)找到这个网页的存放服务器: 2)服务器将用户的请求信息接入: 3)服务器通过文件路径(URL)查找用户请求网页: 4)用 ...
- jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...
- vue之自定义指令directive
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...
- Dapper学习 - Dapper的基本用法(一) - 查询
上一篇, 提到Query<Test>查询的时候, 如果Test中包含自定义class, Dapper不会给自定义class完成映射, 而是直接给null, 其实是可以实现的, 答案就在下面 ...
- MySQL MHA配置常见问题
MHA在MySQL数据库中被广泛使用,它小巧易用,功能强大,实现了基于MySQL replication架构的自手动主从故障转移,从库重定向到主库并自动同步.尽管如此,在部署配置的过程中,由于疏忽总难 ...
- iOs 自定义UIView 日历的实现 Swift2.1
学习Swift有一个月了,动手写一个UIView吧. 所有源代码在最后,直接用就可以了,第一次写Swift,和C#,Java还是有区别的 (博客园可以考虑在代码插入中添加Swift的着色了) 1 函 ...
- jquery简单原则器(匹配第一个元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 点击显示div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Debian 7 下安装CodeBlocks12.11
1. 安装编译器 sudo apt-get install build-essential 2. 安装debug工具gdb sudo apt-get install gdb 3. 更新源 sudo n ...