【零基础入门】 css学习笔记（3） 选择器 与 层叠性

一，选择器

1，基础选择器

1） 标签选择器：div{ } ，选择的所有，而不是一个，用来描述“共性”。
2） 类选择器：.class名{ }

• 多个元素可以同时属于某一个类；
• 一个元素可以同时属于多个类选择器，中间用空格隔开，类名间的顺序不重
  <h3 class="teshu zhongyao">一个h3</h3>
• 不要去试图用一个类名，把某个元素的所有样式写完。这个元素要多携带几个类，共同实现这个元素的样式。
• 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

3）id选择：#id名{ }
元素的id属性，一个元素只能有一个id，页面上不允许多个元素有相同的id。

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

2，高级选择器

1） 后代选择器：空格表示后代选择器

    <style type="text/css">
        .div1 p{   color:red; }
    </style>

.div1 p 就是.div1的后代所有的p。注意：是后代，并不一定是儿子；空格可以出现多次
补充：后代选择器中出现的东西很灵活，可以是标签，可以是class名，可以是id名
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

2） 交集选择器：没有空格，挨着写的
h3.special{ color:red; }
选择的元素是同时满足两个条件：必须是h3标签，然后必须有special类
交集选择器，我们一般都是以标签名开头

3） 并集选择器：用，号隔开
4） 儿子选择器：用>号，IE7开始兼容，IE6不兼容。
与后代选择器区别：子选择器作用于第一代后代（即儿子），后代选择器作用于所有后代。
例子：


.food>li {border:1px solid red;} //儿子选择器


.food li {border:1px solid red;} //后代选择器

5） 下一个兄弟选择器：用+号，表示选择下一个兄弟；IE7开始兼容，IE6不兼容。
例子：h3+p {color: red;}

6） 序选择器：IE8开始兼容，IE6，7不兼容。

ul li:first-child{ color:red; }//选择第一个li
ul li:last-child{ color:red; }//选择最后一个li

二、层叠性

1，如果多个选择器应用到同一个元素，如何确定元素究竟用哪些样式呢？
浏览器是以层叠方式来确定具体使用哪一样样式。即哪一个选择器更特定，就运用该选择器对应的样式。
2，层叠性：就是css处理冲突的能力。
3，如何计算特定性：

4）把上面三位数组合在一起当成真正的数来读：比如100 > 010> 001，得到的特定数越大，这个规则就越特定。
4，案例：
例1：

.special2： 010
.special1： 010
css文件中位置越靠后，优先级越高。因此显示.special2的颜色

注：同一个元素，有多个类选择器修饰，属性描述有冲突，只与在css中类名的先后顺序有关，与在标签中类名的书写顺序无关。

例2：

#box1 .hezi2 p ： 111
div div #box3 p ： 103
div.hezi1 div.hezi2 div.hezi3 p ： 034
因此显示red颜色

例3：
注：下图中前两个css规则不是直接描述p的样式，因此对于p元素来说，权重为0。第三个规则直接描述p元素，权重为001。

例4：

css规则中若没有直接描述p的规则，则使用继承。浏览器会查看p元素的祖先，从它的父元素开始，尝试找到color属性值。
p元素的父元素为<div class=”box”id=”hezi3”>，计算其权重，该div显示red颜色，则p为红色

5，!important： 给一个属性提高权重。这个属性的权重就是无穷大。
1）但在一个选择器中，它写在一个属性后面，只是提升的该属性的权重，并不会提升选择器的权重。
2）而且它无法提升继承的权重，该是0还是0。