CSS常用选择器及优先级

基础选择器

1. 通用选择器，匹配任何元素：*

    *{

        color:#FF0000;

    }

2.标签选择器，匹配指定的所有标签：

    p{

        color:#FF0000;

    }

3. class选择器，匹配所有包含指定class的元素

    .hello{

        color:#FF0000;

    }

    p标签中，class=hello的所有元素，注意，这里p和.hello之间不能有空格，空格是后代选择器

    p.hello{

        color:#FF0000;

    }

4. id选择器，匹配所有包含指定id的元素

    #hello{

        color:#FF0000;

    }

    p标签中，id=hello的所有元素，这里p和#hello之间不能有空格，空格是后代选择器

    p#hello{

        color:#FF0000;

    }

 

组合选择器

1. 多元素选择器，用','逗号隔开元素，不要有空格出现

    p,a{

        color:#FF0000;

    }

2. 后代元素选择器，用' '空格隔开元素

    div p{

        color:#FF0000;

    }

3. 子元素选择器，用'>'大于符号隔开元素，不要出现空格

    div>p{

        color:#FF0000;

    }

 

下面是很重要的优先级顺序

层叠优先级:

浏览器缺省< 外部样式表 < 内部样式表 < 内联样式

{

    浏览器缺省：不写style的时候；

    外部样式表：引用的外部css文件；

    内部样式表：在<style>...</style>中写的样式；

    内联样式：在<p style="..."></p>中写的样式；

}

 

选择器优先级：

通用选择器< 标签选择器 < 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

{

    派生选择器又叫做上下文选择器，比如"div .test #abc{}"

    对于派生选择器，当有"#"号出现时，不管'#'号在什么地方，第一个或者中间或者最后一个，

    都视为ID派生选择器，优先级高于只有一个选择的ID选择器，比如：

        div #abc .hello{} 优先级高于 #abc{}

    同理，类派生选择器，当派生选择器中没有'#'，而有'.'出现时，叫做类派生选择器

        div .hello p{}  优先级高于.hello{}

 

    那么，对于同是派生选择器，优先级又是怎样的呢？

    对于ID派生选择器，ID选择器个数多的优先级高于ID选择器个数少的，比如：

        div #a #b #c{} 优先级高于 div #a #b .c{}

    当ID选择器个数相同的时候，根据谁在后用谁，比如：

        div #a #b .c{}

        div #a .b #c{}

        那么最后起作用的将是div #a .b #c{}

    对于类派生选择器，是和ID派生选择器一样的。

}

 

综合起来：

浏览器缺省，优先级最低

内联样式，优先级最高

外部样式表优先级始终小于内部样式表

在内部和外部样式表中，又按照选择器优先级区分，元素的效果总是由优先级最高的选择器所规定的。

(从上面可以看出，优先级的顺序总是由最详细的选择器所决定的，哪个选择器规定的越清楚，就用谁)