CSS选择器的种类

CSS选择器的种类

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

标签选择器

如果存在

的标签，可以通过在中通过div{}设置这个标签的属性。

类选择器

如果存在

可以通过.haha{}来设置这个标签的属性。

id选择器

如果存在

可以通过 #haha{}来设置这个标签的属性。

并列选择器

如果存在

可以通过div,#haha,.nihao{}这个方式来设置这个标签的属性。

复合选择器

如果存在

可以通过div.nihao{}来设置这个标签的属性。

注意事项

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

后代选择器

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

注意事项

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

直接后代选择器

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

相邻兄弟选择器

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

属性选择器

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

---

伪类的学习

主要使用hover和foucs

hover:

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

foucs:

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

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