导
读
前面对四种常用的选择器做了详细的介绍，下面就四种常用选择器之间的差异进行必要的说明。
选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有p元素1element,elementdiv,p选择所有div元素和p元素1elementelementdivp选择div元素内的所有p元素1elementelementdivp选择所有父级是div元素的p元素2element+elementdiv+p选择所有紧接着div元素之后的p元素2
选择器的差异体现在优先级上。
正
文
四种选择器的差异，主要体现在优先级上。
headmetacharset="UTF-8"title选择器/titlestyletype="text/css"*{font-size:12px;color:red;}/style/headbody选择器的优先级问题div通配符选择器/divdiv标记选择器/divdiv类选择器/divdivID选择器/div/body
页面显示的效果
在页面上，所有的字体都被渲染成了红色，并且字体大小都是12px
对上面的代码稍加修改，添加一个样式
styletype="text/css"*{font-size:12px;color:red;}div{font-size:16px;color:black;}/style
页面显示的效果
div中的文字，字体变成了黑色，字体大小变成了16px。
这里不是因为通配符选择器（*）没有给div作用效果，而是通配符选择器的优先级没有标记选择器的高，页面选择高优先级的标记选择器渲染了文字。
也就是说，当样式冲突时，页面选择搞优先级的渲染。
给div添加上类和id，然后设置样式
headmetacharset="UTF-8"title选择器/titlestyletype="text/css"*{font-size:12px;color:red;}div{font-size:16px;color:black;}.label{font-size:20px;color:yellow;}/style/headbody选择器的优先级问题div通配符选择器/divdivclass="label"标记选择器/divdivid="label-class"类选择器/divdivid="label-id"class="label"ID选择器/div/body
页面显示的效果
对于设置了label属性的div，文字样式又发生了变化，之前设置的样式效果消失了，是之前的样式没有作用到这两个div上面吗？
这还是样式优先级问题，类选择器的优先级比标记选择器的优先级高，所以也没渲染的时候，选择了类属性的样式渲染。
类似的，再添加一个样式
#label-class{font-size:22px;color:blue;}
这是一个ID选择器，也没效果为
说明了id选择器的优先级比标记选择器的高，所以选择渲染了id选择器的样式设置
那么id选择器和类选择的优先级那个更高呢
#label-id{color:pink;}
为最后一个div设置颜色样式
它的颜色跟随了id选择器的颜色，但是字体大小跟随了类选择器的样式，这是因为，id选择器中没有设置字体大小，不会与类选择器的样式冲突，所以能够正常显示。
大概的结论是，优先级顺序：
id选择器类选择器标记选择器通配符选择器
好坏生长
