相邻兄弟选择器 | Adjacent sibling selectors (Selectors) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

相邻兄弟选择器 | Adjacent sibling selectors (Selectors) - CSS 中文开发手册

相邻兄弟组合因子（+）分隔两个选择器。仅当第二个元素直接跟随第一个元素，且两者都是相同父element的孩子节点时，它匹配该第二个元素。

/* Paragraphs that come immediately after any image */
img + p {
  font-style: bold;
}

语法

former_element + target_element { style properties }

实例

CSS

li:first-of-type + li {
  color: red;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

结果

规范

Specification	Status	Comment
Selectors Level 4The definition of 'next-sibling combinator' in that specification.	Working Draft	Renames it the "next-sibling" combinator.
Selectors Level 3The definition of 'Adjacent sibling combinator' in that specification.	Recommendation	​
CSS Level 2 (Revision 1)The definition of 'Adjacent sibling selectors' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	7.01	(Yes)	(Yes)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	(Yes)	?	(Yes)	(Yes)

  CSS 中文开发手册

  本文标题：相邻兄弟选择器 | Adjacent sibling selectors (Selectors) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32153.html