伪类选择器语法
- E:pseudo-class {property:value}
E.class:pseudo-class{property:value}
- E为元素
- class为类名
- pseudo-class为伪类名称
- property是css的属性
- value为css的属性值
语法1示例:
a:link {color:red;}
语法2示例:
a.selected:hover {color: blue;}
动态伪类
动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种。
第一种是我们在链接中常看到的锚点伪类,如”:link”,”:visited”;
另外一种被称作用户行为伪类,如“:hover”,”:active”和”:focus”。
.demo a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/
- :hover用于当用户把鼠标移动到元素上面时的效果;
- :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
- :focus用于元素成为焦点,这个经常用在表单元素上。
对于:hover在IE6下只有a元素支持,:active只有IE7-6不支持,:focus在IE6-7下不被支持。
UI元素状态伪类
把”:enabled”,”:disabled”,”:checked”伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作。
IE6-8不支持”:checked”,”:enabled”,”:disabled”这三种选择器。
CSS3的:nth选择器
这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类。
:nth选择器 | 说明 |
---|---|
:first-child | 选择某个元素的第一个子元素; |
:last-child | 选择某个元素的最后一个子元素; |
:nth-child() | 选择某个元素的一个或多个特定的子元素; |
:nth-last-child() | 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算; |
:nth-of-type() | 选择指定的元素; |
:nth-last-of-type() | 选择指定的元素,从元素的最后一个开始计算; |
:first-of-type | 选择一个上级元素下的第一个同类子元素; |
:last-of-type | 选择一个上级元素的最后一个同类子元素; |
:only-child | 选择的元素是它的父元素的唯一一个了元素; |
:only-of-type | 选择一个元素是它的上级元素的唯一一个相同类型的子元素; |
:empty | 选择的元素里面没有任何内容。 |
:first-child
选择某个元素的第一个子元素。
:last-child
选择某个元素的最后一个子元素。
:nth-child()
选择某个元素的一个或多个特定的子元素。
使用方法 | 说明 |
---|---|
:nth-child(length); | 参数是具体数字 |
:nth-child(n); | 参数是n,n从0开始计算 |
:nth-child(n*length); | n的倍数选择,n从0开始算 |
:nth-child(n+length); | 选择大于length后面的元素 |
:nth-child(-n+length); | 选择小于length前面的元素 |
:nth-child(n*length+1); | 表示隔几选一 |
:nth-last-child()
和前面的”:nth-child”不一样了,他只要是从最后一个元素开始算,来选择特定元素。
选择倒数第几个元素。
:nth-of-type()
:nth-of-type类似于:nth-child,不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素。
:nth-last-of-type()
倒数。
:first-of-type
第一个。
:last-of-type
最后一个。
:only-child
一个元素是它的父元素的唯一一个子元素。
:only-of-type
:only-of-type是表示一个元素他有很多个子元素,而其中只有一个子元素是唯一的,那么我们使用这种选择方法就可以选择中这个唯一的子元素。
:empty
:empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格,比如说,你有三个段落,其中一个段落什么都没有,完全是空的,你想这个p不显示,那你就可这样来写:
p:empty {display: none;}
否定选择器(:not)
否定选择器 :not(),可以让你定位不匹配该选择器的元素。
伪元素
::first-line
选择元素的第一行
::first-letter
选择文本块的第一个字母
::before和::after
这两个主要用来给元素的前面或后面插入内容,这两个常用”content”配合使用,见过最多的就是清除浮动。