CSS-选择器及其兼容性

标签选择器

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

希望页面上所有的超级链接都没有下划线：

        a{
            /*去掉下划线：*/
            text-decoration: none; 
        }

id选择器（#X)

#表示选择id，在选择器中使用#可以用id来定位某个元素。然后使用的时候需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

id选择器是很严格的并且你没办法去复用它。

#pp{
    color:black;
    }

(1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，a和A是两个不同的id。
( 2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。
也就是说，如果有一个p的id叫做p1，这个页面内，其他所有的元素的id都不能叫做p1。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

类选择器(.X)

.p {
  color: red;
}

总结：

( 1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
( 2） 同一个标签可以同时携带多个类
这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。
( 3） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
( 4） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
( 5 )尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
兼容性

IE6+

Firefox

Chrome

Safari

Opera

后代选择器( X Y)

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

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

        .div1 .li2 p{
            color:red;
    }

选择的就是.div1里面的后代.li2里面的p。

当要把某一个部分的所有的什么内容，进行样式改变，就要想到后代选择器。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

交集选择器

h3.special{
color:red;
}

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

注意：交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special。

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

h3,li{
    color:red;
}

用逗号就表示并集。

儿子选择器(X>Y)

IE7开始兼容，IE6不兼容。

div>p{
    color:red;
}

div的儿子p。和div的后代p的截然不同。
能够选择：

<div>
    <p>我是div的儿子</p>
</div>

不能选择：

<div>
    <ul>
        <li>
            <p>我是div的重孙子</p>
        </li>
    </ul>
</div>

例如
div#container > ul {
  border: 1px solid black;
}

X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

#container > ul只会选中id为’container’的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用css选择器时候是强烈建议这么做的。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

序选择器

选择第1个li：

<style type="text/css">
    ul li:first-child{
        color:red;
    }
</style>

选择最后一个1i：

    ul li:last-child{
        color:blue;
    }

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

<ul>
    <li class="first">项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
       <li>项目</li>
<li class="last">项目</li>
</ul>

用类选择器来选择第一个或者最后一个：

    ul li.first{
        color:red;
    }
ul li.last{
    color:blue;
}

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

下一个兄弟选择器

+表示选择下一个兄弟

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

选择上的是h3元素后面紧挨着的第一个兄弟。

   <h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>

IE7开始兼容，IE6不兼容。

CSS的继承性和层叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

能继承的属性：color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。继承性是从自己开始，直到最小的元素。

层叠性

就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

权重问题大总结：
1） 先看有没有选中元素，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听样式后写的为准。
2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。

下列都是IE6兼容的选择器：

p
#box
.spec
div.box
div .box
div , .box
*

下列都是IE7开始兼容：

div>p
div+p

下列都是IE8开始兼容：

div p:first-child
div p:last-child