web前端——css的三大特性
一、继承。
css中的继承是子元素从父元素中获得样式,可以理解为,父元素有什么样式,子元素不设置也有同样的样式(一些标签除外)。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>继承</title> <style type="text/css"> .div1{ color:red; } </style> </head> <body> <div class="div1"> <div>神仙姐姐</div> </div> </body> </html>
上面的例子中我们可以看到,我们并没有给子div设置样式,但是它的文字同样是变了颜色的,这就是从父元素中继承过来的样式。
需要注意的是,h标签和a标签不会继承父元素样式,需要单独给它们设置样式。
二、层叠。
也可以说是覆盖。就是后面的样式把前面的样式给盖住不显示。
比如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>继承</title> <style type="text/css"> .div1{ color:red; } .div1{ color:black; } </style> </head> <body> <div class="div1"> <div>卡特琳娜</div> </div> </body> </html>
我们可以看到,两个样式都起作用了,但是后面的把前面的给盖住了,所以就显示后面写的样式,为什么不是先写的把后面写的盖住呢?这是因为浏览器在解析页面的时候是从上到下一行一行读代码的,所以后面读到的会把前面的覆盖掉。
三、优先级。
如果一个元素,用元素名设置了样式,然后又给它设置了class和id,那么这时候会显示什么样式呢?
这就是要涉及到优先级的问题了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> div{ color:red; } .div1{ color:black; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1" style="color: #00FF00"> 卡特琳娜 </div> </body> </html>
现在我们写了四个样式,都是作用在同一个div上,那么,最终显示的文字是什么颜色呢?
可以看到,写在元素上的行内样式是优先级最高的,其它的样式都被它覆盖了。
样式的优先级:!important > 行内样式 >id选择器 > class选择器 > 标签选择器 > 通配符 * > 继承 > 默认样式。
important 使用方法:就是在样式后面加上!important;就能把优先级调到最高。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> .div1{ color:red !important; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1">卡特琳娜</div> </body> </html>
本来因为有id存在是要显示蓝色的,但是我们给class样式后面加上了important。所以直接将优先级调到了最高。显示红色。
我在网上看到,有人说它们的优先级是:标签选择器是1,类选择器是10,id选择器是100,行内样式是1000.
反正我不理为什么是10倍,我自己没测试出来。
权重:
所谓的权重就是当有好多样式都作用在一个元素上的时候,元素会按照什么样的方式来显示样式。
权重有个公式是:(!important,id选择器,类选择器,标签选择器)
这个公式就是看作用在同一元素上的样式个数,从左到右是从小到大。
如:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .div1{ color:red; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1">卡特琳娜</div> </body> </html>
最终结果显示蓝色,按我们的公式来算的话就是:
第一个样式的权重是:(0,1,0,0)
第二个样式的权重是:(0,0,1,0)
这个公式就跟我们的数字十进制一样,把id位可以看成百位,把class位可以看成十位,100比10大,所以……。我明白了,原来上面说的1,10,100,1000是这样来的。(不对呀,从标签选择器进位到class要255才进一的呀,就这么理解吧。)
再看一个例子:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div .div2{ color:red; } .div2{ color:blue; } </style> </head> <body> <div class="div1" id="div1"> <div class="div2" id="div2">卡特琳娜</div> </div> </body> </html>
最终显示的是第一个样式,颜色红色,按我们的公式来看就可以知道:
第一个权重是:(0,0,1,1)
第二个权重是:(0,0,1,0)
所以,如果想看一个元素最终显示什么样式,要看它的权重是多少。