列举css伪类与伪元素

最新推荐文章于 2024-11-05 14:45:41 发布

^命铭

最新推荐文章于 2024-11-05 14:45:41 发布

阅读量155

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_49758946/article/details/117219429

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

这其中常见的有

:active 向被激活的元素添加样式.

:focus 向拥有键盘出输入焦点的元素添加样式.

:hover 当鼠标悬浮在元素上方时,向元素添加样式;

:link 向未被访问的链接添加样式;

:visited 向已被访问的链接添加样式;

:first-child 向元素的第一个子元素添加样式;

:lang 向带有指定lang 属性的元素添加样式;

(在支持css的浏览器中,链接的不同状态都可以不同的方式来显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态);

下面我会一一举例;

:active伪类向激活(在鼠标点击与释放)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<style>
		*{
			margin-bottom: 10px;
		}
		#act:active{
			background-color: #f00;
		}
		#foc:focus{
			background-color:yellow;
		}
		#hov:hover{
			background-color: yellow;
		}
		#lin{
			background-color: aqua;
		}
		#vis{
			background-color:chocolate;
		}
		#fir p:first-child{
			background-color:#CC2629;
		}
		q:lang(no){
			quotes:"~" "~"
			/*quotes属性设置嵌套引用(embedded quotation)的引号类型*/
		}
	</style>
	 这个使用:focus伪类<input type="text" name="姓名" id="foc"><br>
	这个使用:active伪类<a href="https://www.hao123.com/?tn=48020221_38_hao_pg" id="act">百度网站</a><br>
	<p id="hov"> 这个使用:hover伪类 hover伪类</p>
	<a href="https://www.hao123.com/?tn=48020221_38_hao_pg" id="lin">使用了:link伪类(注意link选择样式链接到你还没有去过的链接)</a><br>
	<a href="https://www.hao123.com/?tn=48020221_38_hao_pg" id="vis">这使用的是visited伪类(注意:visited选择器样式链接到你已经访问过的页面)</a>
	通过first伪类选择第一个p标签
	<div id="fir">
	<p>第一个</p>
	<p>第二个</p>
	<p>第三个</p>
	<p>第四个</p></div>
	
	<p>SOme text<q lang="no">A quote in a paragraph</q>Some text</p>
</body>
</html>

CSS伪元素用于向某些选择器设置特殊效果;

:first-letter 向文本的第一个字母添加特殊样式;

:first-line 向文本的首行添加特殊样式;

:before 在元素之前添加内容;

:after 在元素之后添加内容;

<style>
	.p2:first-letter{
		
		color:#ff0000;
		font-size:xx-large;
	}
	#lin{
		color:#f00;
		font-size:xx-large;
	}
	#bef .p1:before{
		content: "这是被添加的内容";
	}
	.aft .p3:after{
	content: "这是用after在p标签之前添加的内容";
	}
	</style>
<body>
	<p class="p2">This is a text<br>first-letter伪类为段落的第一个字符添加特殊样式</p>
	<p id="lin">first-line向文本的首行添加特殊样式(注意:first-line只能与块级元素关联.可以应用首字母的属性是有限的)</p>
	<div id="bef">
	<p class="p1">在这个元素之前添加内容</p>
		</div>
	<div class="aft">
	<p class="p3">这里用after添加内容</p>
	</div>
	</body>

在这里面我们可以通过:hover这个伪类实现更多的样式;

就比如当鼠标悬浮在该元素上时将设置该元素的宽变大;

<style>
.he{
		width: 100px;
		height: 100px;
		background-color:#170303;
	}
	.he:hover{
		width: 300px;
	}
	</style>

<body>
<div class="he"></div>
</body>