CSS参考手册
选择 | Selectors
一般兄弟选择器 | General sibling selectors
后续兄弟组合因子(~
)分隔两个选择器,且只有当它第二个元素位于第一个元素之后(虽然不一定相邻),并且两者是相同的父element
的子元素时,它选择满足该条件的第二个元素。
/* Paragraphs that are siblings of and
subsequent to any image */
img ~ p {
color: red;
}
语法
former_element ~ target_element { style properties }
实例
CSS
p ~ span {
color: red;
}
HTML
<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) |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。