关于css伪类的实例分析

关于css伪类

包括两种：UI伪类 结构化伪类

一 UI伪类：基于特定HTML元素的状态应用样式。

1 链接伪类（四种状态）

link 点击前；Visited 点击之后；Hover 鼠标悬停在链接上；Active 点击时；

以下是4个伪类选择符：

a:link{color:black;}
a:visited{color: #ccc;}
a:hover{text-decoration: none;}
a:active{color: black;}

PS:有些伪类可以用于任何元素,例：

p:hover{background-color:gray;}

2 focus伪类 e:focus

e表示任何元素，如p,h1,input

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则input:focus {border:1px solid blue;}

会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

3 target伪类 e:target

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它

二 结构化伪类

1 first-child和last-child

e:first-child e:last-child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。

#main ul li:first-child{color:red} 表示将ul下的第一个元素颜色设置为红色

#main ul li:last-child{color:red}表示将ul下的最后一个元素颜色设置为红色

2 nth-child

e:nth-child(n)

设置属于其父元素的第n个子元素

3 伪元素

1 ::first-letter伪元素 e::first-letter (一般用于段落的第一个字）

比如：p::first-letter {font-size:300%;} 段落首字符放大效果

2 ::first-line伪元素 e::first-line （一般用于段落的第一行）

比如:p::first-line{font-variant:small-caps;} 把第一行变成了大写字母显示

3 ::before和::after

可用于在特定元素前面或后面添加特殊内容。 以下标记：

25

和如下样式： p.age::before {content:"Age: ";} p.age::after {content:" years.";} 注意，每个content属性值中都包含了空格，以便输出结果中有适当的空距。 能得到以下结果： Age: 25 years.