CSS 伪类选择器

最新推荐文章于 2024-10-02 23:33:51 发布

verify.Mar

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量152

点赞数 5

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2301_80227523/article/details/139157157

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

比如div是属于box类，这一点明确，就是属于box类。

但是a属于什么类？不明确。因为需要看用户点击前是什么状态。所有，就叫做伪类。

有个便于记忆的

类 .one

伪类 :link

（1）静态伪类：只能用于超链接的样式

:link 超链接点击前
:visited 链接被访问国之后

（2）动态伪类：针对所有标签都适用的样式：

:hover "悬停“：鼠标放到标签上的时候
:active "激活”：鼠标点击标签，但是不松手时
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

a标签有4种伪类（即对应四种状态）

:link “链接”：超链接点击之前
:visited ”访问过的“：链接被访问过之后的
:hover ”悬停“：鼠标放到标签上的时候
:active "激活”：鼠标点击标签，但是不松手时

最好以lvha的顺序写，便于记忆有有个“爱恨准则”：love hate 先爱后恨

（禁止伤春悲秋了，学习！！！！）

<style>
	/*让超链接点击之前是红色*/
	a:link{
		color:red;
	}

	/*让超链接点击之后是绿色*/
	a:visited{
		color:orange;
	}

	/*鼠标悬停，放到标签上的时候*/
	a:hover{
		color:green;
	}

	/*鼠标点击链接，但是不松手的时候*/
	a:active{
		color:black;
	}
</style>

a{} PK a:link{}

a{} 定义的样式针对所有的超链接（包括锚点）
a:link{} 定义的样式针对所有写了href属性的超链接（不包括锚点）

更难的等我再学学学学，哭。

动态伪类举例

下面这三种动态伪类，针对所有标签都适用。

:hover "悬停“：鼠标放到标签上的时候
:active "激活”：鼠标点击标签，但是不松手时
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

举例

<style>
    input:focus{
            border: 3px solid #FF6F3D;
            color:white;
            background-color:#6a6a6a;
    }
</style>

利用hover属性，摘取GitHub大佬代码实现表格举例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">

	/*整个表格的样式*/
  	table{
		width: 300px;
		height: 200px;
		border: 1px solid blue;
		/*border-collapse属性：对表格的线进行折叠*/
		border-collapse: collapse;
  	}

	/*鼠标悬停时，让当前行显示#868686这种灰色*/
  	table tr:hover{
  		background: #868686;
  	}

	/*每个单元格的样式*/
  	table td{
  		border:1px solid red;
  	}

  </style>
 </head>
 <body>

  <table>
  <tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
  </tr>
  <tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
  </tr>
  <tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
  </tr>
  </table>

 </body>
</html>