【CSS】伪类与伪元素

一伪类

语法: 
selector : pseudo-class {property: value}

 提示:伪类名称对大小写不敏感。

   与 CSS类搭配使用

selector.class : pseudo-class {property: value}

例子:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类们:

 :visited 伪类 - 向已被访问的链接添加样式。

 :link 伪类 - 向未被访问的链接添加样式。

 :hover 伪类 - 当鼠标悬浮在元素上方时,向元素添加样式。

 :active 伪类 - 向被激活的元素添加样式。

 :first-child 伪类 - 选择元素的第一个子元素。

 :focus伪类 - 向拥有键盘输入焦点的元素添加样式。

 :lang 伪类 - 为不同的语言定义特殊的规则。


二 伪元素
语法: 
selector:pseudo-element {property:value;}
提示:伪类名称对大小写不敏感。

   与 CSS类搭配使用:

selector.class :pseudo-element{property: value}
例子:
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff; font-variant:small-caps; }

 :first-letter 伪元素 - 向文本的第一个字母添加特殊样式。

 :first-line 伪元素 - 向文本的首行添加特殊样式。

 :before 伪元素 - 在元素之前添加内容。

 :after 伪元素 - 在元素之后添加内容。

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。