©2020-2024 ioDraw All rights reserved
1.包含选择器
包含选择器通过空格标识符来实现
例如：
<div id="header"> <p>文本一</p> </div> <div id="main"> <p>文本二</p> </div> #header
p{ fontsize:12px; } #header p{ fontsize:12px; }
即设置header和main里<p>标签像素大小为12
2.子选择器
子选择器是指定父元素所包含的子元素，子选择器使用">"表示
例如：
div>span{ ...... font-size:24px; }
即包含在div元素里的子元素span字体大小都定义为24像素。
3.相邻选择器
相邻选择器通过“+”分隔符定义，即两个标签必须是规定给的顺序关系，否则无法实现
例如：
p+h3{ ...... background-color：#0099FF；}
即在<p>标签之后的一个<h3>标签背景设置为蓝色。
4.兄弟选择器
通过“~”分隔符定义，能够选择前置元素后同级的所有匹配元素
例如：
p~h3{ background-color:#0099FF; .......} <h3>文本一</h3> <p>文本二</p> <h3>文本三</h3>
即<p>之后的所有h3背景色都改为蓝色。
5.分组选择器
分组选择器通过“，”分隔符定义，通过分组选择器可以实现集体声明，将一致的CSS样式放在一起。
例如：
h1,h2,h3{ background-color:#0099FF; .......}
即将h1,h2,h3标签的背景都设置为蓝色。