CSS的选择器

CSS基础选择器

标签选择器

就是用标签名来当做选择器。
1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等
2） 不管这个标签藏的多深，都能够被选择上。
3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。

id选择器

#表示选择id
1       #lj1{
2           font-size: 60px;
3           font-weight: bold;
4           color:black;
5       }
1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说mm和MM是两个不同的id。
2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。
也就是说，如果有一个p的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha。

类选择器

.就是类的符号。类的英语叫做class。
所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。
class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：
1   
我是一个h3啊
2   
我是一个h3啊
3   
我是一个h3啊
4   
我是一个段落啊
5   
我是一个段落啊
6   
我是一个段落啊
css里面用.来表示类：
1       .teshu{
2           color: red;
3       }

同一个标签，可能同时属于多个类，用空格隔开：
1
我是一个h3啊
这样，这个h3就同时属于teshu类，也同时属于zhongyao类。

初学者常见的错误，就是写成了两个class：
1
我是一个h3啊

所以要总结两条：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2） 同一个标签可以同时携带多个类。

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：
1   
每个标签，就去选取自己想要的类：
1    
段落1
2   
段落2
3   
段落3

也就是说：
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

CSS高级选择器

后代选择器

1   

空格就表示后代，.div1 p 就是.div1的后代所有的p。
强调一下，选择的是后代，不一定是儿子。

比如：
1   

2       

3           

4               
段落
5               
段落
6               
段落
7           
8       
9   
能够被下面的选择器选择上：
1       .div1 p{
2           color:red;
3       }
所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。

空格可以多次出现。
1       .div1 .li2 p{
2           color:red;
3       }
就是.div1里面的后代.li2里面的p。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

交集选择器

1h3.special{
2   color:red;
3}
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
交集选择器没有空格。
所以有没有空格
1div.red
和
1div .red
不是一个意思。

并集选择器（分组选择器）

1h3,li{
2   color:red;
3}
用逗号就表示并集。

通配符*

*就表示所有元素。
1*{
2   color:red;
3}
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

一些CSS3选择器

儿子选择器>

IE7开始兼容，IE6不兼容。

1 div>p{
2   color:red;
3}
div的儿子p。和div的后代p的截然不同。
能够选择：
1   

2       
我是div的儿子
3   
不能选择：
1   

2       

3           

4               
我是div的重孙子
5           
6       
7   

序选择器

IE8开始兼容；IE6、7都不兼容

选择第1个li：
1   

选择最后一个1i：
1       ul li:last-child{
2           color:blue;
3       }
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
1   

2       
项目
3       
项目
4       
项目
5       
项目
6       
项目
7       
项目
8       
项目
9       
项目
10      
项目
11      
项目
12  
用类选择器来选择第一个或者最后一个：
1       ul li.first{
2           color:red;
3       }
4
5       ul li.last{
6           color:blue;
7       }

下一个兄弟选择器

IE7开始兼容，IE6不兼容。

+表示选择下一个兄弟
1   
选择上的是h3元素后面紧挨着的第一个兄弟。
1    
我是一个标题
2   
我是一个段落
3   
我是一个段落
4   
我是一个段落
5   
我是一个标题
6   
我是一个段落
7   
我是一个段落
8   
我是一个段落
9   
我是一个标题
10  
我是一个段落
11  
我是一个段落
12  
我是一个段落
13  
我是一个标题

欢迎关注公共号