伪类选择器 常用有这些:
1,鼠标点击元素的4种状态 爱恨离别(link visited hover active) 前面的2个只适用于
a标签,后面的2个适用于其他标签。顺序不能改变
2,列表中先选择谁就选择谁
first-child 选择开头
last-child 选择结尾
nth-child(odd或者enen或者自定义数值) 选择偶数或者奇数或者自定义行
3,当一个容器只有一个值就生效的选择器 only-child 只爱一个人 多了就不生效了
4,当容器除让她以外 其他都匹配到 not(她) 一个好的前任就应该更死了一样
5,当容器里面的元素为空的时候 就生效 empty
6,当元素获得焦点的时候,就生效 focus 这个很常用 也很实用 通常用于用户输入的对话框
7,作为单选和复选修改样式的时候 checked
伪元素(对象)选择器
有befor 和alter
他们常用于给列表前后添加各种样式的美化效果
也是用于给标题前后添加美化效果
目录
一,鼠标点击的四种状态 link visited hover active
二,列表中想选择谁就选择谁 first-child last-child nth-child(n)
四,里面没有任何元素,他就生效,有了子元素他就不生效 emply
六,焦点选择器,谁被鼠标点中,获得焦点,谁就生效 focus
一,伪类选择器
一,鼠标点击的四种状态 link visited hover active
注意link 和visited 仅仅限于超级连接 a标签
第一种 link 鼠标访问之前的颜色
修改超链接 鼠标点击之前的颜色
a:link{
color: #fa4d15;
}
第二种,visited 鼠标访问之后的颜色
/*修改点击之后的颜色*/
a:visited{
color: yellow;
}
第三种,鼠标滑过去的颜色
/* 鼠标悬停上面的颜色*/
a:hover{
color: dimgray;
}
第四种,鼠标按住不动的状态
/* 鼠标点击但是不松手的状态*/
a:active{
color: yellowgreen;
}
全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!-- 伪类选择器
示例 比如a标签有4个状态 访问之前 的颜色 访问过后的 鼠标放在标签上的 鼠标点击但是不松手的
link 访问之前的
visited 点击之后的颜色
hover 鼠标悬停上面的颜色
active 鼠标点击但是不松手的状态
必须按照顺序来的 l v h a
-->
<style>
/*<!-- 修改访问之前的颜色 -->*/
a:link{
color: #fa4d15;
}
/*修改点击之后的颜色*/
a:visited{
color: yellow;
}
/* 鼠标悬停上面的颜色*/
a:hover{
color: dimgray;
}
/* 鼠标点击但是不松手的状态*/
a:active{
color: yellowgreen;
}
/* 点击和点击后的颜色 只要a这种可以点击生效 其他的对所有标签都生效*/
/* 鼠标悬停上面的颜色*/
p:hover{
color: dimgray;
}
/* 鼠标点击但是不松手的状态*/
p:active{
color: yellowgreen;
}
/* 看看input的效果 同样,前面的2个不生效 只是后面的2个生效*/
/* 鼠标悬停上面的颜色*/
input:hover{
color: dimgray;
}
/* 鼠标点击但是不松手的状态*/
input:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<p>我也来看看有没有这个效果</p>
<form action="https://www.baidu.com/">
<input type="submit">
</form>
</body>
</html>