CSS-子元素选择器

2021/9/4 23:35:46

编程Tag： 选择器 type 标签 css 元素 color first child

本文主要是介绍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-子元素选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS-子元素选择器

相关编程文章