css3伪类选择器

最新推荐文章于 2024-07-08 17:07:45 发布

Blank0411

最新推荐文章于 2024-07-08 17:07:45 发布

阅读量100

点赞数

分类专栏： CSS3新特性文章标签： css3

本文链接：https://blog.csdn.net/weixin_49342009/article/details/109247024

版权

CSS3新特性专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css3伪类选择器：

动态伪类选择器：
他不存在于html中，只有在交互的过程中，才能使用动态伪类选择器对其进行样式的渲染

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		a:link{color: red;}
		a:hover{color: blue;}
		a:visited{color:gray;}
		a:active{color:green;}
	</style>
</head>
<body>
	<a href="">超链接</a>
</body>
</html>

UI元素状态伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		input:disabled{background-Color:red}
		input:enabled{background-Color:green}
	</style>
</head>
<body>
	<input type="text">
	<input type="text" disabled>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>结构伪类选择器</title>
	<style type="text/css">
		.demo{
			width: 300px;
			border: 1px solid black;
		}
		.clear-fix{
			clear: both;
			overflow: auto;
		}
		.demo li{
			list-style: none;
			text-decoration: none;
			float: left;
			border: 1px solid black;
			padding:4px; 
			width: 12px;
			margin: 2px;
			border-radius: 10px;
		}
		.demo li:first-child{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="demo clear-fix">
		<ul class="clear-fix">
			<li a=href="">1</li>
			<li a=href="">2</li>
			<li a=href="">3</li>
			<li a=href="">4</li>
			<li a=href="">5</li>
			<li a=href="">6</li>
			<li a=href="">7</li>
			<li a=href="">8</li>
			<li a=href="">9</li>
			<li a=href="">10</li>
		</ul>

	</div>
</body>
</html>

:first-child 选择某个元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child() 选择某个元素的一个或多个待定的子元素
:nth-last-child() 选择某个元素的一个或多个待定的子元素,从这个元素的最后一个元素开始算
:nth-of-type() 选择某种类型元素下的一个或多个待定的子元素
:nth-last-of-type() 选择某种类型元素下的一个或多个待定的子元素,从元素的最后一个开始计算

伪元素：

::first-letter
::first-line
::before
::after

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪元素</title>
	<style type="text/css">
		.demo{
			border: 1px solid black;
			width: 300px;
			margin: 20px auto;
			padding: 10px;			
		}
		.demo::first-letter{
			font-size: 40px;
			font-weight: bold;
			float: left;
		}
		.demo::first-line{
			color: red;
		}
		.demo01::before{
			content:"";
		}
		.demo01::after{
			content:"";
		}

	</style>
</head>
<body>
	<div class="demo">
		 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
	</div>
	<div class="demo01">
		hellohellohellohellohellohello
	</div>
</body>
</html>

Blank0411

关注

0
点赞
踩
0

收藏

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

css3伪类选择器：动态伪类选择器：他不存在于html中，只有在交互的过程中，才能使用动态伪类选择器对其进行样式的渲染 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a:link{color: red;} a:hover{color
复制链接

扫一扫