选择器

css选择器主要分为三类:标签名选择器、类选择器、ID选择器。当然后续还扩展了一些后代选择器和群组选择器。

 一、 下面对着5中选择器进行举例：

        1. 标签名选择器     div { color：Red;}         即页面中的各个标签名的css样式

        2.类选择器          .divClass {color:Red;}       即定义的每个标签的class 中的css样式

        3.ID选择器         #myDiv  {color:Red;}        即页面中的标签的id

        4.后代选择器（类选择器的后代选择器）  .divClass  span { color:Red;}   即多个选择器以逗号的格式分隔 命名找到准确的标签

        5.群组选择器   div,span,img {color:Red}    即具有相同样式的标签分组显示

二、 选择器的优先级

        1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>

        2.次优先级是（ID选择器 ,假设级别为100）   #myDiv{color:Red;}

        3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}

        4.最后优先级是 （标签选择器，假设级别是 1）  div{color:Red;}

        5.那么后代选择器的优先级就可以计算了啊

        比如 .divClass  span { color:Red;}   优先级别就是：10+1=11

        总结：对于在什么情况下使用什么样的选择器，原则有三点:一选择可以准确的找到要控制的标签；二使用最合理的优先级的选择器；三还要是html和css看起来简洁美观可读性强。

通常: 1.最常用的选择器是类选择器

         2.li  td dd 等经常大量连续出现并且样式相同或相似的情况下，一般选用类选择器和标签选择器结合的后代选择器 例：.XX li/td/dd {}

         3.极少的情况下会用ID选择器。

三、选择器的定位原则

         以前一直认为选择的定位是从左向右的方向，查看了网上的相关资料之后才发现原来自己一直都是错的。郑重的声明选择器的定位是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素。

四、简洁、高效的css

        所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

      1.不要再ID选择器前使用标签名

        解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

      2.不要在类选择器前使用标签名

      解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

      3.尽量少使用层级关系；

         #divclass p.colclass{color:red;}改为  .colclass{color:red;}

      4.使用类选择器代替层级关系（如上）