前端必带小片刀：css3选择器汇集

每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。

我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。

文章目录：

•  　  一、基本选择器
• 　　二、层次选择器
• 　　三、伪类选择器
• 　　四、伪元素
• 　　五、属性选择器

一、基本选择器

 1. 通配选择器 「*」

1 *{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0
2 .demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色

2.元素选择器 「Element」

1 body{background:#ccc} //选择body元素 
2 ul{background:#fff} //选择列表ul元素

3.ID选择器 「#id」

1 html:
2 

3 css:
4 #demo{do something}

4.类选择器 「.class」

1  html:
2  

3  css:
4  .demo{do something}
5  ul.demo{do something} //这样只会选择有demo类名的ul元素

需要注意的是：多个页面元素可以有相同的类名，但是元素的id在页面中必须是唯一的。

5.群组选择器 「selector1，...，selectorN」

4
5
6

7 css:
8 a[href$=png]{do something} //将会选择href属性以png结尾的a标签