CSS选择器

1. 基本选择器

1) id选择器

#id {color: red}
<div id="div1">第一个div标签</div>

2) class选择器

.div2 {color: blue}
<div class="div2">第二个div标签</div>

3) 元素选择器

h3 {color: yellow}
/*针对所有的h3标签起作用*/

2. 组合选择器

1) 后代选择器

#id1 span {color: red}
/*表示id1包含的所有span标签，可以层层嵌套包含*/

2) 子类选择器

#id1>span {color: red}
/*表示id1标签包含的下一级span标签*/

3) 下邻选择器

p+span {color: red}
/*表示与p标签同级的下面相邻的span标签*/

4) 属性选择器

div[mail] {color: red}
/*表示含有mail属性的div标签*/

5) 同级选择器

#div1~p {color: red}
/*表示div1标签下面所有同级的p标签*/

6) 组合选择器

div[mail], p+span {color: red}
/*通过逗号将多个上述的选择器组合起来*/