首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一般兄弟选择器 | General sibling selectors

后续兄弟组合因子~)分隔两个选择器,且只有当它第二个元素位于第一个元素之后(虽然不一定相邻),并且两者是相同的父element的子元素时,它选择满足该条件的第二个元素。

代码语言:javascript
复制
/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

语法

代码语言:javascript
复制
former_element ~ target_element { style properties }

实例

CSS

代码语言:javascript
复制
p ~ span {
  color: red;
}

HTML

代码语言:javascript
复制
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>

结果

规范

Specification

Status

Comment

Selectors Level 4The definition of 'subsequent-sibling combinator' in that specification.

Working Draft

Renames it the "subsequent-sibling" combinator.

Selectors Level 3The definition of 'general sibling combinator' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

(Yes)

1.0 (1.7 or earlier)

7

9

3

Feature

Firefox Mobile (Gecko)

Android

Edge

IE Phone

Opera Mobile

Safari Mobile

Basic support

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com