html css层叠样式基础（后代和子代元素选择器，伪类选择器）（四）

最新推荐文章于 2023-07-10 17:32:20 发布

咸鸭蛋炒饭

最新推荐文章于 2023-07-10 17:32:20 发布

阅读量1k

点赞数 1

分类专栏： HTML5基础篇文章标签： html css

本文链接：https://blog.csdn.net/u010853130/article/details/54895215

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.后代和子代元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			 	为div中的span设置一个字体颜色为红色
			 	
			 	- 后代元素选择器
			 		- 作用：可以选中指定祖先元素的指定后代
			 		- 语法： 祖先元素 后代元素 {}
			 		- 例子：
			 			div span{}
			 			p span{}
			 			
			 			body div p span a {}
			 			.hello div {}
			 * */
			#d1 span{
				color: red;
			}
			
			/*
			 	为div的子元素span，设置一个背景颜色为黄色
			 		- 子元素选择器
			 			- 作用：可以选中指定的父元素的指定子元素
			 			- 语法：父元素 > 子元素{}
			 			- 子元素选择器在IE6浏览器中不支持
			 * */
			div > span{
				background-color: yellow;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<!--
			父元素
				- 直接包含子元素的元素称为父元素
			子元素
				- 直接被父元素包含的元素称为子元素
			祖先元素
				- 直接或间接包含后代元素的元素称为祖先元素
				- 父元素也是祖先元素
			后代元素
				- 直接或间接被祖先元素包含的元素称为后代元素
				- 子元素也是后代元素
			兄弟元素
				- 拥有相同父元素的元素是兄弟元素
			
		-->
		
		<div id="d1">
			我是一个div
			<p>
				我是div中的p元素
				<span>
					我是p元素中的span元素
				</span>
			</p>
			
			<span>我是div中的span元素</span>
			
		</div>
		
		<hr />
	
		<div>
			<span>我是div外边的span元素</span>
		</div>
		
		
	</body>
</html>

2.伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 将未访问过的链接设置为黄色
			 * :link
			 * 		- 正常的超链接（未访问过的超链接）
			 */
			a:link{
				color: yellow;
			}
			
			/*
			 * 将访问过的链接设置为红色
			 * :visited
			 * 	 - 已访问过的超链接
			 * 	 - 是通过浏览器中是否有对应的历史记录，来判断链接访问过
			 * 		但是由于隐私的原因，该为类只可以修改字体的颜色
			 */
			a:visited{
				color: red;
			}
			
			/*
			 	:hover
			 		- 表示鼠标移入的元素
			 * */
			a:hover{
				color: blue;
			}
			
			/*
			 	:active
			 		- 表示元素正在被点击的状态
			 * */
			a:active{
				color: orange;
			}
			
			
			/*
			 * hover和active也可以应用到其他元素上
			 */
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			div:hover{
				background-color: yellow;
			}
			
			div:active{
				background-color: yellowgreen;
			}
			
		</style>
	</head>
	<body>
		
		<div></div>
		
		<!--
			
			在CSS中，使用伪类来表示一些特殊的状态，
				比如：正常的超链接（没访问过的超链接）、访问过的超链接
			
		-->
		
		
		<a href="http://www.baidu.com">访问过的超链接</a>
		<br /><br />
		<a href="http://www.baidu1234567.com">未访问过的超链接</a>
		
	</body>
</html>

注意：a标签的伪类顺序代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 	由于选择器的优先级的问题，所以在给a设置伪类时，一定要注意他们的顺序
			 	我们一般使用的顺序是
			 		link
			 		visited
			 		hover
			 		active	
			 * */
			
			a:link{
				color: red;
			}
			
			a:visited{
				color: orange;
			}
			
			
			
			a:hover{
				color: yellow;
			}
			
			
			a:active{
				color: yellowgreen;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<a href="#">访问过的链接</a>
		<br /><br />
		<a href="http://www.nihaoa.com">未访问过的链接</a>
		
	</body>
</html>

咸鸭蛋炒饭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html css层叠样式基础（后代和子代元素选择器，伪类选择器）（四）

1.后代和子代元素选择器 /* 为div中的span设置一个字体颜色为红色 - 后代元素选择器 - 作用：可以选中指定祖先元素的指定后代 - 语法：祖先元素后代元素 {} - 例子： div span{} p span{}
复制链接

扫一扫