CSS-子元素选择器

最新推荐文章于 2024-07-06 20:00:00 发布

forward93124

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量300

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_41342791/article/details/120107612

版权

<!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>

forward93124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-子元素选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /** * 为第一个P标签设置一个背景颜色为黄色 * :first-child 可以选中第一个子元素 * :last-chhild 可以选中最后一个子元素 */ p:firs.
复制链接

扫一扫