CSS 伪类选择器 web前端基础

特性：

伪类选择器用于向某些选择器添加特殊的效果。

1. 比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
2. 伪类选择器书写最大的特点是用 冒号 :表示
3. 伪类选择器有很多，比如有链接伪类、结构伪类等
   伪类选择和类选择器的区别：

类选择器是一个点 比如 .demo { 属性值 }
而我们的伪类 用 2个点 就是 冒号 比如 :link { 属性值 }

链接伪类选择器

语法如下：

a:link { 样式声明 }					/* 选择所有未被访问的链接 */
a:visited { 样式声明 }				/* 选择所有已被访问的链接 */
a:hover { 样式声明 }				/* 选择鼠标指针位于其上的链接 */
a:active { 样式声明 }				/* 选择活动链接（鼠标按下未弹起的链接） */

注意

• 为了确保生效，必须按照 l v h a 的循顺序声明 :link－:visited－:hover－:active
• 因为 a 链接在浏览器中具有默认样式，在实际工作中都需要给链接 单独指定样式
  具体案例：

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

结构(位置)伪类选择器（CSS3)

作用：
可以选择具体某个标签，从而改变其属性的样式。

• first-child :选取属于其父元素的首个子元素的指定选择器
• last-child :选取属于其父元素的最后一个子元素的指定选择器
• nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式
  具体写法如下：

 li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
其具体语法如下：

 :target {
		color: red;
		font-size: 30px;
}

可直接定位到某个位置。如：目录在前面标签，点击目录可直接跳到其目录下的具体内容。
可改变文字的大小、颜色、类型等。