关于对选择器的分类及使用！总结！

 类型选择器(标签选择器) ：以文档对象html中的标签作为选择符

                        标签{属性：属性值；} 例：div{width：200px；}

 Class选择器(类选择器)：想要区分某个标签的时，比如想要区分2个div。

                        单类选择器

                        <div class=“box”></div>

                        .Class名字{属性：属性值；}

                        .box{width：300px；}

注：多个class用一个样式，则将选择器用","隔开，且两个选择器之前都要加"."

                        多类选择器

                        calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。

                        

与属性名出现的顺序没有关系：

     例：            class = "a b"和class = "b a"

                        可以写.a {}  // 属性值含有a的

                                   .b {} // 属性值含有b的

                                   .a.b{} // 属性值含a又含b的

 ID选择器：想要区分某个标签的时，比如想要区分2个div。

                        <标签 id=“box1”></div>

                        #ID名字{ 属性：属性值；}

                        #box1{width:200px;}

注意点：ID有唯一性，属性值只能是1个。

属性选择器

E[attr] ：希望选择有某个属性的元素，而不论属性值是什么 例如：a[href]{color:red;}

E[attr="value"] ：只选择有特定属性值的元素 例如: a[href="www.com"]{color:red;}

E[attr^="value"]：属性值是以value开头的

E[attr$="value"]：属性值是以value结尾的

E[attr~="value"] : 属性值是可以是单个值也可以是以空格隔开的一个词列表

        注：当是一个词列表时，等号前面的“〜”必须写。

E[attr*="value"]：属性值含有value的 属性选择器()

派生选择器

后代选择器：用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下： ul li li { ...}

a:hover img{...}

子元素选择器：子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：ul > li { ...}

a:hover>img{...}

相邻兄弟选择器：选取的是紧跟在后面的兄弟元素。(同级的)

h1 + p { ...}

a:hover+img{...}

注：!important声明的优先级最高