DHTML【7】--CSS

    本节将要介绍CSS的选择器，CSS有三种常用的选择器，还有三种扩展选择器，说到选择器，那么选择器是做什么用的呢？

    上一节我们介绍CSS常用属性的时候，我们都是通过在标签内定义Style属性来介绍的，但是如果Style中的属性有很多，并且我们还要把相同类型的标签用同一个CSS样式来美化，我们总不能Copy代码吧，首先页面太乱，再者代码量大，在大型的网站开发中会影响执行效率，最后自己操作起来也很麻烦，遇到这个问题，我们改怎么解决呢？

    这就是选择器要做的事情，我们可以先定义好一个样式，然后再指定给那些需要美化的标签，这样难道不好吗？好，从美学角度讲，一个页面的同类事物只有一个风格会给用户整体舒服感，那么选择器该怎么用呢？下面先请看下图：

    此图看和想5分钟，好好体会一下。了解了分类和用途之后，下面我们就结合代码，看看你的体会对吗？

    1.标签选择器

    在浏览器中查看发现所有的div标签全被美化了，其他标签都是默认状态，<style type="text/css"></style>这段代码可以先不用管，下一节会介绍，主要看红色标记的部分，标签选择要写在head标签内，写法格式要好好掌握。

    2.类选择器

    在浏览器中查看发现，只有在class属性被定义的标签被相应美化了，其他标签仍为默认样式，类选择器的名称是自定义的。

    3.ID选择器

    ID选择器和我们平时开发取对象很相似，最具有针对性。

    对于以上的三种选择器，三种选择器可以结合使用，但是浏览器会给他们排个优先级，就是标签的样式被定义多次，该显示哪个样式，浏览器会其中优先级最高的样式，样式优先级：ID>class>标签。

    4.关联选择器

    在浏览器中查看，我们发现，只有div标签内的h1标签被修饰了，div标签内的其他标签，甚至div外的h1标签都没有被修饰，这就是关联组合器的作用，神奇吧。

    5.组合选择器

    在浏览器中查看，我们会发现，只有div,h1,p这三种标签被修饰了，其他标签没有被修饰，这也是标签选择器的组合用法，达到页面效果统一。

    6.伪元素选择器

        这是我介绍的最后一个选择器了，上面代码在浏览器中查看，发现超链接默认的颜色变为了绿色，鼠标放上去的时候鼠标指针形状为问号帮助样式，当我们鼠标按下时超链接的颜色变为红色，访问完再回到页面，发现超链接的颜色变为蓝色，我说完这些你也大概知道上面的代码是什么意思了，为选择器不仅可以用于a标签，还可以用于p等标签，具体怎么用就去查帮助文档吧，怎么查呢？

           DHTML->HTML元素->a标签->样式。

    好了，关于选择器我就介绍到这里，之所以举这么简单的例子，是因为我主要讲的是原理，不想因为初学者突然看到其他难点而忽略了重点。好了，本节就到这里，下一节将继续HTML与CSS的结合方式。