CSS选择器的种类
- 标签选择器
- 类选择器
- id选择器
- 并列选择器
- 复合选择器
- 后代选择器
- 直接后代选择器
- 相邻兄弟选择器
- 属性选择器
标签选择器
如果存在<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>
注意事项
- 在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网站。
