伪类:
作用是对所选元素做操作时加一些样式,或者对所选元素的子元素加样式。
语法:
标签:伪类动作{属性:值}
selector : pseudo-class {property: value}
标签.标签的类:伪类动作{属性:值}
selector.class : pseudo-class {property: value}
伪类可以有的动作:
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
例子:
对a标签进行不同操作获得不同样式:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪元素:
与伪类作用相似,对所选的元素或该元素附近元素添加特殊样式。
注意:CSS3为了区别伪元素和伪类,将伪元素改写为两个冒号selector::pseudo-element
语法:
标签:需要做的动作{属性:值}
selector:pseudo-element {property:value;}
标签.需要做的动作:伪类动作{属性:值}
selector.class:pseudo-element {property:value;}
伪元素可以做的动作:
属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
例子:
在h1标签后附上logo.gif图片:
h1:after
{
content:url(logo.gif);
}