一、css伪类(Pseudo-class)是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
伪类的语法:
selector:pseudo-class{property:value;}
css类也可以使用伪类:
selector.class:pseudo-class{property:value;},eg:
a.red:visited{color:#FF0000;}
<a class="red" href="css-syntax.html">css syntax</a>
伪类包括:
选择器 | 示例 | 事例说明 |
:link | a:link | 让它表现地像个链接一样 |
:visited | a:visited | 访问过之后什么效果(只能修改特定的样式) |
:hover | a:hover | 把鼠标移动上去有什么效果 |
:active | a:active | 激活之后是什么效果 |
注意:
- 在css定义中,a:hover必须被置于a:link和a:visited之后,才是有效的;
- a:active必须被置于a:hover之后,才是有效的;
- 伪类的名称不区分大小写。
选择器 | 示例 | 事例说明 |
:focus | input:focus | 向拥有键盘输入焦点的元素添加样式(当focus之后显示效果) |
:first-child | p:first-child | 向元素的第一个子元素添加样式 |
:lang | p:lang | 向带有指定lang属性的元素添加样式 |
:nth-of-type(x) | 常用来对表格显示奇数行和偶数行不同色块;注意是x-1行对应的效果 | |
:empty | 如果选择元素没有子节点,表现什么样式,常用来做首屏渲染 | |
:read-only | 元素只读 | |
:only-of-type | 页面中只有这一个类型的元素会显示的效果 | |
:invalid | 校验之后显示的效果 |
二、伪元素( Pseudo-elements)是用来添加一些选择器的特殊效果。
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
伪元素的语法:
selector:pseudo-element{property:value}
css类也可以使用伪元素:
selector.class:pseudo-element{property:value}
p.article:first-letter{color:red;}
<p class="article">A paragraph in an article</p>
伪元素包括:
选择器 | 示例 | 事例说明 |
:first-line | p:first-line | 选择每个<p>元素的第一行;只能用于块级元素 |
:first-letter | p:first-letter | 选择每个<p>元素的第一个字母;只能用于块级元素 |
:before | p:before | 在每个<p>元素之前插入内容; |
:after | p:after | 在每个<p>元素之后插入内容; |
注意:css2伪类和伪元素都是用单冒号,所有的浏览器都兼容,但是css3伪类为单冒号,伪元素为双冒号;但是双冒号IE8以下不兼容!所以,c如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。