一 、伪类(不存在的类,特殊的类)
定义:不真实存在的类,是一种特殊的类,它表示的元素的一种状态,不是固定某一定
例如:第一名,倒数第一名,鼠标悬浮,鼠标点击等
常见的伪类选择器
语法使用‘:’开头
:first-child 第一个元素
:last-child 最后一个元素
:nth-child() 选中第几个元素
特殊值:
2n或even 偶数
2n+1或odd 奇数
—以上这些伪类都是根据所有的子元素进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type() 选中第几个元素
功能跟上面相似,不同的是,这是在同类型的子元素中去选择
二、:not() 否定伪类
-将符合条件的元素从选择器中去除
/* 需求一:给未访问过的超链接加红色字体 */
/* 1、:link 没有访问过的状态 */
a:link{
color: orange;
}
/* 需求二:给访问过的超链接加绿色字体 */
/* 2、:visited 访问过的状态 */
a:visited{
color: green;
/* 以下样式不生效 */
font-size: 50px;
background-color: pink;
}
/*
注意:
1、:link和:visited 是a标签独有的伪类
2、由于隐私问题,:link和:visited只能设置字体颜色
*/
/* 需求三:鼠标移入,链接字体变大到30px */
/* 3、:hover 鼠标移入的状态 */
a:hover{
font-size: 30px;
}
h1:hover{
color: green;
background-color: hotpink;
}
/* 需求四:鼠标点击后,增加背景色pink */
/* 4、:active 鼠标点击后的状态 */
a:active{
background-color: pink;
}
div:active{
color: red;
}
/*
注意:
:hover和:active 针对所有的元素
*/