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

  可用于在特定元素前面或后面添加特殊内容。

   以下标记：

  <p class="age">25</p>

  和如下样式：

  p.age::before {content:"Age: ";}

  p.age::after {content:" years.";}

  注意，每个content属性值中都包含了空格，以便输出结果中有适当的空距。

  能得到以下结果：

  Age: 25 years.