用户投稿元素间的关係
除了我们之前讲到的交集、併集选择器外，複合选择器还有后代、兄弟、子选择器等依照元素间结构关係来选取到该元素的选择器，所以在讲接下来的选择器之前我们先来简单介绍一下 HTML 元素之间的关係。
在下面这段程式中我们可以看到结构为 <div> 包裹着 <form、<a> 和 <span>，而 <form> 标籤中又包含两个 <input>。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <div> <form> <input type="text" name="userName"> <input type="button" value="button"> </form> <a>test 123</a> <span>test 456</span> </div> </body></html>从最外层的结构来看，<div>包着三个标籤，所以我们称 <form>、<a> 及 <span> 为子元素，而 div 为他们的父元素。除此之外，在同一层的元素被称为兄弟元素，所以这边的 <form>、<a> 及 <span> 互为兄弟元素。
其实 HTML 的结构关係就像是家庭的关係，有父子、兄弟、祖先和后代，下图是同一段程式码的下一层解析。我们可以看到 <input> 是在 <div> 的子元素 <form> 中，所以对 <div> 来说，<input> 是他的后代元素 (在结构关係中不论是子元素、孙子元素、曾孙元素...等都被称为后代元素)；而反过来 <div> 为 <input> 的祖先元素。
后代选择器
后代选择器的功能顾名思义就是选中元素中符合条件的后代元素，这边的后代元素包含子元素，可以理解为 ... 中的元素，例如 div p .red 可以解释为选择 div 中的 p 标籤中的拥有 red 这个 class 的元素。
语法：
元素1 元素2 元素3... 元素n { /* 元素必须由外层写到内层 */ 属性名: 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> div a { /* 选择 div 中的 a */ color: red; } </style> </head> <body> <div> <a>123我要变红色</a> <!-- 变红色 --> </div> <a>我会变成红色吗？ 不会</a> <!-- 不符合 div a 这个选择器，不会变色 --> </body></html>子选择器
子选择器的规则比后代选择器更加严谨，只会选中元素的子元素，其他后代不受影响。
语法：
元素1 > 元素2 > 元素3... > 元素n { /* 元素必须由外层写到内层 */ 属性名: 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .block > a { /* 选择 div 中的子元素 a */ color: red; } </style> </head> <body> <div class="block"> <a>123我要变红色</a> <!-- 是 .block 的儿子，会变红色 --> <div> <a>我是儿子还是孙子？</a> <!-- 是 .block 的孙子，不会变色 --> </div> <span>我是儿子但我不是 a</span> <!-- 符合子元素，但不符合标籤为 a，不会变色 --> </div> <a>我会变成红色吗？ 不会</a> <!-- 不符合 div a 这个选择器，不会变色 --> </body></html>兄弟选择器
兄弟选择器会选择该元素符合条件的兄弟元素，主要分为通用兄弟选择器及相邻兄弟选择器，比较特别的是兄弟选择器只会选择到该元素之后的兄弟元素 (如範例)。
通用兄弟选择器：选择某元素后的所有兄弟元素相邻兄弟选择器：选择某元素后的第一个兄弟元素语法：
/* 通用兄弟选择器 */元素1 ~ 元素2 { /* 元素2必须是元素1后面的兄弟元素 */ 属性名: 属性值;}/* 相邻兄弟选择器 */元素1 + 元素2 { /* 元素2必须是元素1后面的第一个兄弟元素 */ 属性名: 属性值;}通用兄弟元素範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> h1 ~ a { color: red; } </style> </head> <body> <a>我也是兄弟但我在前面</a> <!-- h1 元素前面的兄弟元素不会变色 --> <h1>我是标题</h1> <a>123</a> <div> <a>我会变色吗？</a> <!-- h1 的兄弟 div 的子元素不会变色 --> </div> <a>123</a> <a>123</a> </body></html>相邻兄弟元素範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> h1 + a { color: red; } </style> </head> <body> <a>我也是兄弟但我在前面</a> <h1>我是标题</h1> <a>123</a> <!-- 只有这个元素符合 h1 后面的第一个兄弟元素 a --> <div> <a>我会变色吗？</a> </div> <a>123</a> <a>123</a> </body></html>上一篇：[快速入门前端 11] CSS 选择器 (2) 複合选择器 — 交集和併集
下一篇：[快速入门前端 13] CSS 选择器 (3) Pseudo-Classes 伪类 - 动态伪类
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
