CSS选择器以及权重的设置
一个页面的搭建离不开css款式，而想要应用css对页面元素进行管制就须要用到css选择器。
依照引入形式能够说有外部款式（款式写到标签中的style里）、内部款式（款式通过引入内部的css文件）、内联款式（款式写在html文件中的style标签里）
依照选择器分类的话，常见的选择器有id选择器、类选择器、标签选择器、通配符选择器、派生选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="content" class="container"> content1 <div id="content2" class="container"> content2 </div> </div></body><style> /* div { color: red; } */ #content { color: aquamarine; } .container { color: blue; } /* * { color: yellow } */ div .container { color: rgb(224, 34, 215) } #content2 { color: burlywood }</style></html>不同的选择器，权重是不一样咱们能够看到就下面的选择器而言
id>级联>class>标签>通配符
粗疏一点的话，再找几个例子的话，能够发现下面的并不完全正确
尤其是波及到id跟级联这块
div #content2 { color: rgb(9, 90, 45) } #content2 { color: burlywood }能够发现，下面这种是第一个色彩显示进去，而不是依据id显示进去。
起因css通配符选择器效率低，因为css匹配的程序不是从左向右，而是从右向左。应用通配符选择器时，浏览器会先匹配所有的元素，再进一步匹配其余规定，这样就导致了效率变低。
css的匹配规定是从右往左，也就是说，就下面的例子而言先匹配content2的元素，再匹配属于div的content元素。这样的话，即便存在上面的款式，也会被下面的笼罩掉。
至于通配符的话，他其实存在一些效率问题。毕竟匹配所有元素不如指定元素。
此外，针对class属性中有两个选择器的状况，优先级是依照定义程序形式确定的。
<head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="content" class="container"> content1 <div id="content2" class="container container2"> content2 </div> </div></body><style> .container2 { color: aqua } .container {color: red }</style></html>也就是说替换下面.container和.container2的地位，字的色彩会发生变化，然而批改class=“container container2”为class=“container2 container“并不会扭转字的色彩。
此外对于! important能够进步优先级值得提一下，个别不提倡应用，毕竟失常用下面的选择器有语义化，都能看懂，忽然来了个插队的，怎么玩？
示例：class比id选择器更优先，因为加了个!important
\#content { color: blueviolet } .container { color: aqua !important }