1、元素选择器
![](https://img.haomeiwen.com/i20427831/0f08fa3f96aa16d9.png)
2、id选择器
![](https://img.haomeiwen.com/i20427831/a3501e57ec1c6f4b.png)
3、类选择器(可以同时设置两个class,中间用空格隔开 )
<div class = " aa abc " >我是一个盒子</div> 可以有两个class标签
![](https://img.haomeiwen.com/i20427831/d68b0601aba9e32e.png)
4、选择器分组(并集选择器)
![](https://img.haomeiwen.com/i20427831/fc33546d3c34392e.png)
5、通配选择器(一般在消除浏览器自身样式时使用)
![](https://img.haomeiwen.com/i20427831/5449c8a5b97715ec.png)
![](https://img.haomeiwen.com/i20427831/4f8844e9accb6d4d.png)
消除浏览器自带样式
*{
margin: 0;
padding: 0;
}
6、复合选择器
![](https://img.haomeiwen.com/i20427831/30e8ca044c6e10b2.png)
子元素和后代子元素选择器
子元素:指的是子元素的后代
后代子元素:直接子元素(第一个子元素)
兄弟元素:拥有同一个父元素的元素
![](https://img.haomeiwen.com/i20427831/18be30ad703e10c2.png)
后代子元素如何选择?
![](https://img.haomeiwen.com/i20427831/307293fe799d1f73.png)
![](https://img.haomeiwen.com/i20427831/74cdad0cd9e5064f.png)
后代子元素如果重复怎么选择?
![](https://img.haomeiwen.com/i20427831/b516482c1936375d.png)
如何给直接儿子(子元素)设置样式?
![](https://img.haomeiwen.com/i20427831/da069ed98cd069eb.png)
效果
![](https://img.haomeiwen.com/i20427831/f645465436522b51.png)
网友评论