CSS选择器的种类

1. 标签选择器
2. 类选择器
3. id选择器
4. 并列选择器
5. 复合选择器
6. 后代选择器
7. 直接后代选择器
8. 相邻兄弟选择器
9. 属性选择器

标签选择器

如果存在<div></div>的标签，可以通过在<style></style>中通过div{}设置这个标签的属性。

类选择器

如果存在<div class="haha"></div> 可以通过.haha{}来设置这个标签的属性。

id选择器

如果存在<div id="haha"></div> 可以通过 #haha{}来设置这个标签的属性。

并列选择器

如果存在 <div id="haha" class="nihao"></div> 可以通过div,#haha,.nihao{}这个方式来设置这个标签的属性。

复合选择器

如果存在<div id="haha" class="nihao"></div>可以通过div.nihao{}来设置这个标签的属性。

注意事项

这里的div和nihao之间是不能有空格的而且第一个标签必须是标签选择器。

后代选择器

如果存在这样的情况，那么就可以通过div p直接拿到div后代中的所有p标签，也就是那两个p标签，如果我这样div span p就可以直接拿到span后代的那个p标签。

 <div>
    <p></p>
    <span>
        <p></p>
    </span>
 </div>

注意事项

1. 在div p之间必须有一个空格（一个以上的空格好像不行，本人还没有测试）

直接后代选择器

如果存在如下情况,那么可以使用div>p直接拿到p标签，但是这个是直接后代，所以不会拿到span下面的p标签。

 <div>
    <p></p>
    <span>
        <p></p>
    </span>
 </div>

相邻兄弟选择器

如果存在这种情况，那么可以用div + p{}相邻兄弟选择器拿到div标签的相邻标签p标签，然后设置它的属性。

 <div>
    <p></p>
    <span>
        <p></p>
    </span>
 </di>
 
 <p></p>

属性选择器

如果存在如下情况,那么就可以通过div[name]{}拿到带有name属性的标签。也可以使用div[name][class]{}设置属性中有name,class的标签，并设置属性。还可以使用class=person单独选择出某一个标签。

 <div name="jack"> </div>
 <div name="rose"> </div>
 <div name="lily" class="person"> </div>

伪类的学习

主要使用hover和foucs

hover:

当鼠标悬浮到元素上方是，添加样式

foucs:

向拥有键盘输入焦点的元素添加样式

伪类是在css的样式设置中使用的，例如div:hover{}，其中:和div之间不能有空格，必须紧挨着，然后:和hover之间也不能有空格。其余的可以参考w3cSchool网站。