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.

如果哪里写错了，有疑惑可留言哦，谢谢指出，共同进步哦！