组合选择器
1. 概述
HTML 文档是一个树状的结构,因此 HTML 元素之间存在位置关系,如父子关系、祖孙关系、相邻关系。如何利用这种位置关系来选择元素呢? CSS 的解决方法是采用组合选择器。
组合选择器的格式为:
E 组合操作符 F
其中 E
和 F
是简单选择器或级联选择器。他们通过组合操作符
连接起来。
目前 CSS 支持4种组合操作符:>
、空格
、+
、~
。这4种组合操作符代表了4种关系,并产生了4种组合选择器。
四种组合选择器:
- 儿子选择器 (Child Selector)
- 儿孙选择器 (Descendant Selector)
- 长弟选择器 (Next-sibling Selector)
- 弟弟选择器 (Subsequent-sibling Selector)
2. 儿子选择器 (>)
儿子选择器用于选择一个元素的所有儿子元素。
语法
E > F
说明
儿子选择器的选择目标是 F
元素,且 F
元素的父亲是 E
元素。E
和 F
用 >
相连。
比如 div > p{color:red}
规则,选择器 div > p
将选择 p
元素,并且p
元素的父亲是 div
元素。
再比如 div.note > p{color:red}
规则,选择器 div.note > p
将选择 p
元素,并且 p
元素的父亲是 div
元素,并且 div
元素使用了 note
类。
示例
选择 body
元素的所有儿子级别的 p
元素,并将其文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> body > p {color:red;} </style> </head> <body> <p>松下问童子,</p> <p>言师采药去。</p> <div> <p>只在此山中,</p> </div> <p>云深不知处。</p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
3. 儿孙选择器 ( 空格 )
儿孙选择器用于选择一个元素的所有的晚辈元素,包括儿子元素、孙子元素、重孙元素,以及更深层次的晚辈元素。
语法
E 空格 F
说明
儿孙选择器的选择目标是 F
元素,且 F
元素的祖先元素至少有一个是 E
元素。E
和 F
之间用空格
相连。
比如 div p{color:red}
规则,选择器 div p
将选择 p
元素,并且 p
元素的祖先元素至少有一个是 div
元素。
再比如 div.note > p span{color:red}
规则,选择器 div.note > p span
将选择 span
元素,这些 span
元素是 p
元素的儿子元素,同时 p
元素又是使用了 note
类的 div
元素的晚辈元素。
示例
选择 body
元素包含的所有 p
元素,并将它们的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> body p {color:red;} </style> </head> <body> <p>松下问童子,</p> <p>言师采药去。</p> <div> <p>只在此山中,</p> </div> <p>云深不知处。</p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
4. 长弟选择器 (+)
长弟选择器用于选择一个元素的第一个弟弟元素。
语法
E + F
说明
长弟选择器的选择目标是 F
元素,且 F
元素上方的第一个兄弟元素是 E
元素 。E
和 F
之间用 +
相连。
比如 h1 + p{color:red}
规则,选择器 h1 + p
将选择 p
元素,且 p
元素相邻的上方兄弟节点是 h1
元素。
示例
将紧挨着 h2
元素的 p
元素的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> h2 + p {color:red;} </style> </head> <body> <h2>谁是我的第1个弟弟?</h2> <p>我是第1个弟弟</p> <p>我是第2个弟弟</p> </body> </html> |
效果
谁是我的第1个弟弟?
我是第1个弟弟
我是第2个弟弟
5. 弟弟选择器 (~)
弟弟选择器用于选择一个元素的所有弟弟元素。
语法
E ~ F
说明
弟弟选择器的选择目标是 F
元素,且 F
元素上方的兄弟元素中至少有一个是 E
元素。 E
和 F
之间用 ~
相连。
比如 h1 ~ p{color:red}
规则,选择器 h1 ~ p
将选择 p
元素,且 p
元素上方兄弟元素中至少有一个是 h1
元素。
示例
将 h2
元素所有弟弟级别的 p
元素的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> h2 ~ p {color:red;} </style> </head> <body> <h2>谁是我的弟弟?</h2> <p>我是第1个弟弟</p> <p>我是第2个弟弟</p> </body> </html> |
效果
谁是我的弟弟?
我是第1个弟弟
我是第2个弟弟
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。