关于CSS中选择器的一点补充[(div p),(div>p),(div+p)]

CSS element element 选择器

实例:选择div 下所有的p元素

/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/
	<style>
	div p{
	background-color:red;
	}
	</style>
--------------------------------------------------------------------
<body>
<div >
	<p>取次花丛懒回顾</p>		/* 背景red*/
	<p>半缘修道半缘君</p>		/* 背景red*/
</div>
	<p>金风玉露一相逢</p>		/* 无*/
	<p>便胜却人间无数</p>		/* 无*/
</body>

CSS element>element 选择器
实例 选取父元素是 div 元素的每个 p 元素:

/*选取父元素是 <div> 元素的每个 <p> 元素,并设置其背景色:*/
	<style>
	div>p {
	background-color:yellow;
	}
	</style>
---------------------------------------------------
<body>
		<div >
		<p>取次花丛懒回顾</p>		/* 背景yellow*/
		<p>半缘修道半缘君</p>		/* 背景yellow*/
		</div>
		<div><p>金风玉露一相逢</p></div>	/* 背景yellow*/
		<span><p>便胜却人间无数</p></span> /* 无*/
</body>

CSS element+element 选择器

/*选择 <div> 元素之后紧跟的每个 <p> 元素*/
<style>
	div+p {
	background-color:yellow;
}
</style>
--------------------------------------------------------------
<body>
		<div >
		<p>取次花丛懒回顾</p>		/* 无*/
		<p>半缘修道半缘君</p>		/* 无*/
		</div>
		<div><p>金风玉露一相逢</p></div>		/* 无*/
		<p>便胜却人间无数</p>			/* 背景yellow*/	
</body>
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值