CSS-子元素选择器

2021/9/4 23:35:46

本文主要是介绍CSS-子元素选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**
			 * 为第一个P标签设置一个背景颜色为黄色
			 *   :first-child 可以选中第一个子元素
			 *   :last-chhild 可以选中最后一个子元素
			 */
			p:first-child{
				background-color: yellow;
			}
			
			p:last-child{
				background-color: yellow;
			}
			
			/**
			 *   :nth-child 可以选中任意位置的子元素
			 *      该选择器后边可以指定一个参数,指定要选中第几个子元素
			 *      even 表示偶数位置的子元素
			 *      odd  表示奇数位置的子元素
			 */
			p:nth-child{
				background-color: yellow;
			}
			
			/**
			 * :first-of-type
			 * :last-of-type
			 * :nth-of-type
			 *     和:first-child这些非常类似
			 *     只不过child,是在所有的子元素排列
			 *     而type,是在当前类型的子元素中排列
			 */
			p:first-of-type{
				background-color: #0000FF;
			}
			
		</style>
	</head>
	    <span>我是span</span>
	    <p>我是一个P标签</p>
		<p>我是一个P标签</p>
		<p>我是一个P标签</p>
		<p>我是一个P标签</p>
		<p>我是一个P标签</p>
		<p>我是一个P标签</p>
	<body>
	</body>
</html>



这篇关于CSS-子元素选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程