伪类选择器

最新推荐文章于 2024-07-13 11:50:40 发布

abskka2211

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量685

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/abskka2211/article/details/117730972

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

根据元素不同的状态选择元素。

伪类名描述
:active 选择激活的元素
:focus 选择有输入焦点的元素
:hover 选择鼠标悬停在上方的元素
:link 选择未访问的链接
:visited 选择已访问的链接
:first-child 选择第一个子元素

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a:link{
				color: gray;
			}
			a:visited{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="#1" target="_self">伪类选择器</a>
		<a href="#2" target="_self">伪类选择器</a>
		<a href="#3" target="_self">伪类选择器</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img:hover{
				width: 240px;
				height: 200px;
			}
			input:focus{
				border: 1px skyblue solid;
			}
			input:active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<img src="榴莲.png" />
		<br>
		<label>数量：</label>
		<input type="text" size="3" value="1"/>
		<input type="button" value="购买"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				border: 1px green solid;
				min-height: 30px;
				max-width: 300px;
				margin-left: 50px; 
				background-color: white;
			}
			div:first-child{
				border: 1px gold dotted;
			}
			div:hover{
				min-height: 40px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>大哥</div>
		<div id="myself">
			我
			<div>
				大儿
				<div>大孙子</div>
				<div>二孙子</div>
			</div>
			<div>二儿</div>
			<div>三儿</div>
			<div>四儿</div>
		</div>
		<div>三弟</div>
		<div>四弟</div>
	</body>
</html>

具体样式可以自己去尝试一下

abskka2211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类选择器

根据元素不同的状态选择元素。伪类名描述:active 选择激活的元素:focus 选择有输入焦点的元素:hover 选择鼠标悬停在上方的元素:link 选择未访问的链接:visited 选择已访问的链接:first-child 选择第一个子元素例子：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <sty
复制链接

扫一扫