关于css的选择优先级问题，我们先看一个html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优先级测试</title> <style> .div{ color:rebeccapurple } div{ color:yellow; } #id1{ color:lightblue } </style> </head> <body> <div class="div1" id="id1" style="color:red">优先级问题</div> </body> </html>
我们对同一个<div>标签进行了四种方式的颜色设定
最终<div>标签的颜色是style=“color：red”决定了他的最终颜色
然后我们通过不断去掉最终颜色对应的优先级问题，然后我们可以得到这样的一个优先级顺序
标签内的style > #调用id > .调用类名 > 标签名称
但是他们之间的优先级关系又不仅仅是大于的关系，因为会涉及嵌套多册继承，采用不同的方式调用内部
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style －－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数 class－－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1
大致就是上面这样的一个数值关系，当涉及多个调用方式的时候就可以至今进行相加，最终数字结果越大优先级就越高
二、css的继承性
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} <p>helloyuan</p>
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
部分情况的特殊说明：
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
三、css的常用属性
1.颜色属性
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
最后面的这个参数0.5就是文本的透明度设置
2.字体属性
font-size: 20px/50%/larger
font-family:'Lucida Bright'font-weight: lighter/bold/border/<h1 style="font-style: oblique">老男孩</h1>background-image: url('1.jpg');
以图片为背景，url是内存连接
background-repeat: no-repeat;(repeat:平铺满)
no-repeatx仅横向铺满
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
测试：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background-color: antiquewhite; } body{ width: 100px; height: 600px; background-color: deeppink; background-image: url(1.jpg); background-repeat: no-repeat; background-position: center center; } </style> </head> <body> </body> </html>
暂时就是这么多，今天我的pycharm罢工了，非常招人烦。。。浪费了差不多40分钟的时间。