CSS的选择器
（1）标签选择器：div、p、a、input、span、h1……
div{
color: red;
}
p{
color: yellow;
}
<p>
我是段落
</p>
（2）类选择器：class
/类选择器样式：class/
.styleDiv{
color: blue;
}
<div class="styleDiv">
我是div容器
<p>我是div中的段落</p>
</div>
（3）id选择器：id
/id选择器样式：id/
#styleP{
background-color: orange;
}
<div id="main">
我是div容器
</div>
（4）并列选择器：
/并列选择器样式：类&id/
#main, .test1{
color: greenyellow;
}
<h1 class="test1">我是标题1</h1>
<h2 id="main">我是标题2</h2>
（5）复合选择器：
/复合选择器样式：标签中的类/
div.styleDiv{
color: purple;
border: dashed 2.0px orange;
}
<div class="styleDiv">
我是div容器
<p>我是div中的段落</p>
</div>
（6）后代选择器：
/后代选择器样式：标签中的标签，或类中的类，或id中的id/
div p{
background-color: red;
border: groove 2.0px green;
}
<div>
我是div容器
<p>我是段落标签</p>
</div>
（7）直接后代选择器：
div > p{
color: aqua;
background-color: red;
border: double 2px orchid;
}
<div>
我是div容器
<p>我是段落标签</p>
<span>
我是span容器
<p>我是span中的段落</p>
</span>
</div>
（8）相邻兄弟选择器：
/相邻兄弟选择器：两个相邻标签的后面标签的style/
h3 + a{
color: brown;
border: 2px solid;
}
a + h3{
background-color: orchid;
border: 0.5px solid;
}
<a>我是超链接1</a>
<h3>我是标题3</h3>
<a>我是超链接2</a>
（9）属性选择器：
h4[name][age]{
color: orange;
background-color: #5e7d00;
border: solid 2px;
}
h4[name="devZhang"]{
background-color: orchid;
}
<h4 name="devZhangsy" age="30">我是标题4-1</h4>
<h4 name="devZhang">我是标题4-2</h4>
<h4 name="devzhang">我是标题4-3</h4>
（10）伪类选择器：
input:focus{
/*第一响应者*/
outline: none;
width: 200px;
}
input:active{
/*被激活时*/
background-color: purple;
}
p:hover{
/*鼠标悬浮时*/
color: black;
background-color: aqua;
}
<input type="text" placeholder="我是输入框">
（11）伪元素选择器：
p[job="iOSDev"]:first-letter{
color: red;
background-color: yellow;
}
<p job="iOSDev">我是段落：伪元素</p>
