1、复合选择器
组合使用不同的选择器可以匹配更特定的元素。
1.1、并集选择器
创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。
<style type="text/css"> a, [lang|="en"] { border: thin black solid; padding: 4px; } </style> 指定了一个类型选择器a和一个属性选择器[lang｜='en']。
⚠️可以根据自己的需要任意多个选择器，只需将不同的选择器之间用逗号隔开即可。
1.2、后代选择器
后代选择器：用于选择包含在其他元素中的元素。
- 先应用第一个选择器，再从匹配元素的后代中找出匹配第二个选择器的元素。
- 后代选择器会匹配任意包含在匹配第一个选择器的元素中的元素，不仅是直接子元素。
①<style type="text/css"> p span { border: thin black solid; padding: 4px; } </style> 匹配p元素的后代span元素。 ②<style type="text/css"> #mytable td { border: thin black solid; padding: 4px; } </style> 使用ID选择器选中id为mytable的表格，然后选中表格包含的td元素。
1.3、选择子元素
只匹配元素中的直接后代
<style type="text/css"> body > * > span, tr > th { border: thin black solid; padding: 4px; } </style> 创建了一个并集选择器，首先找到属于body元素任意子元素的子元素的span，然后找到tr元素的子元素th
1.4、选择兄弟元素
使用相邻兄弟选择器可以选择紧跟在某元素之后的元素。
<style type="text/css"> p + a { border: thin black solid; padding: 4px; } </style> 匹配紧跟在p元素之后的a元素。
⚠️使用普通兄弟选择器选择范围会宽松一些，它匹配的元素在指定元素之后，但不一定相邻。
<style type="text/css"> p～a { border: thin black solid; padding: 4px; } </style> 选择器匹配的元素不仅限于匹配第一个选择器的元素的相邻兄弟元素。
