兄弟选择器进一步说明

21k commented 7 years ago

A ~ B{}

是A和B同一父级，且B在A后面，B在A前面的不匹配。 https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

~连接符分割两个选择器，只有第一个选择器在第二个选择器前面时才匹配第二个选择器，两个选择器在属于父级。

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>兄弟选择符 (E~F)_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p ~ h3{
    color: #f00;
}
</style>
</head>
<body>
<div class="test">
    <h3>这是一个标题1</h3>
    <p>这是一个文字段落2</p>
    <p>这是一个文字段落3</p>
    <h3>这是一个标题4</h3>
    <p>这是一个文字段落5</p>
    <h3>这是一个标题6</h3>
    <p>这是一个文字段落7</p>
    <p>这是一个文字段落8</p>
</div>
</body>
</html>

效果 qq 20170222110511

doyoe commented 7 years ago

嗯，你说的这个更为详尽。但是如果按照中文的语境来讲：兄弟 可能就已经表示是同一个父亲了。不过我已经按照你的建议做了更为详细的修改，感谢反馈。

21k commented 7 years ago

赞一个

doyoe / css-handbook

兄弟选择器进一步说明 #124