组合选择符


后代选择器

后代选择器用于选取某元素的后代元素。
以下实例选取所有

元素插入到

元素中:

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了

元素中所有直接子元素

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。


以下实例选取了所有位于

元素后的第一个

元素:

<style>
div+p
{
	background-color:yellow;
}
</style>

<body>

<h1>文章标题</h1>

<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>

</body>

在这里插入图片描述

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有

元素之后的所有相邻兄弟元素

:

div~p
{
  background-color:yellow;
}













评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值