1.id 选择器
选中具有特定id的HTML元素,css中的id选择器以 # 来定义
<style> #abc { color: #0044bb } </style> <body> <p id="abc">独怜幽草涧边生</p> </body>
2.class属性选择器
选中具有特定class的HTML元素,css中的class选择器以 . 来定义
.ab1 { color: #cc0000 } <p class="ab1">东边日出西边雨</p>
3.标签选择器
选中特定类型的HTML元素，标签选择器，直接就是标签的名称来定义
p { font-size: 20px } <p id="abc">独怜幽草涧边生</p> <p class="ab1">东边日出西边雨</p>
4.分组选择器
可以选中一组HTML元素，在css当中，分组选择器以 ， 来定义
a, span { background: #51a7e8 } <a>春蚕到死丝方尽</a> <br> <span>相见时难别亦难</span> <br>
5.属性选择器
a.选取具有特定属性的html元素，在css当中，属性选择器以 [] 来定义
[class="li"] { color: #cc0000 } <ul> <li class="li">十年生死两茫茫</li> <li class="li">不思量</li> <li class="li">自难忘</li> </ul>
b.我们也可以不为属性指定值
[titl] { background: #4d4d4d } <a titl="hello python world">只愿君心似我心，定不负相思意</a>
c.属性选择器还支持匹配单词边界，使用 ~= 来定义
匹配title属性值的单词 边界值 为 hello 的
a[title~="hello"] {
background: #cc0000
}
<a title="hello python world">只愿君心似我心，定不负相思意</a>
#这样就渲染不到，他不是hello为边界值
<a title="ello python world">只愿君心似我心，定不负相思意</a>
#这个就不能渲染到 a[title~="python"] { background: #cc0000 } <a title="hello python world">只愿君心似我心，定不负相思意</a>
6.组合选择器，css中有四种组合选择器
a.后代选择器 （以空格分开）：后代选择器，用于选取某元素的后代元素，无论层级有多深。
#ab1 p { color: #cc0000 }
#会渲染id属性为ab1，下的所有p标签
<div id="ab1">
<ul>
<li>玉带林中挂</li>
<li>金钗雪里埋</li>
</ul>
<div>
<p>一从二令三人木</p>
<div>
<p>可叹停机德</p>
<p>堪怜咏絮才</p>
</div>
</div>
<p>子系中山狼，得志便猖狂</p>
</div>
b.子元素选择器以 大于号(>) 进行分割 ：子元素选择器，与后代选择器相比，子元素选择器只能选中直接子元素
#ab1 > p { background: #51a7e8 }
#只会渲染下面红色的标签，其余P标签不渲染 <div id="ab1"> <ul> <li>玉带林中挂</li> <li>金钗雪里埋</li> </ul> <div> <p>一从二令三人木</p> <div> <p>可叹停机德</p> <p>堪怜咏絮才</p> </div> </div> <p>子系中山狼，得志便猖狂</p> </div>
c.相邻兄弟选择器以 加号(+)分隔：兄弟选择器，可选择紧挨在另一元素后的一个元素，且二者拥有相同的父元素
#xyz + .hello { color: yellow } #自会渲染相邻后的属性值为hello的值 <ul> <li id="xyz">欲洁何曾洁</li> <li class="hello">云空未必空</li> <li class="hello">可怜金玉质</li> <li>终陷淖泥中</li>
</ul>
#xyzzz + li {
font-size: 50px
}
#只会渲染“右擎苍”的标签
<ul>
<li>老夫聊发少年狂</li>
<li id="xyzzz">左牵黄</li>
<li>右擎苍</li>
<li>锦帽貂裘千骑卷平岗</li>
</ul>
d.后续兄弟选择器以 小波浪线(~) 分隔 ：后续兄弟选择器，选取指定元素之后的所有弟弟
#xyzz ~ li { color: blue } <ul id="abc2"> <li id="xyzz">老夫聊发少年狂</li> <li>左牵黄</li> <li>右擎苍</li> <li>锦帽貂裘千骑卷平岗</li> </ul>
7.伪类 nth-child 使用
伪类 nth-child(n) 匹配属于其父元素的第 N 个子元素 nth-last-child(n)，如字面意思：倒数第几个标签 nth-of-type(n)，第 N 个指定类型的标签 first-child,第一个标签 last-child,最后一个标签