小记：css特殊性

【小记：css特殊性】的更多相关文章

今天早上遇到了个小bug,刚好用从css权威指南学到的知识解决了 html结构 <ul class="portlet-nav"> <li><a id="portlet-1">Tab 1</a></li> <li><a id="portlet-2">Tab 2</a></li> <li><a id="portlet…

一.特殊性规则选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1. 对于选择器中的每一个id,记0,1,0,0: 2. 对于选择器中的每一个类.伪类.属性,记0,0,1,0: 3. 对于选择器中的每一个元素.伪元素,记0,0,0,1: 4. 结合符与通配符对于选择器的特殊性没有任何贡献. 注意: 1. 0,0,1,0的特殊性比0,0,0,13的特殊性更高. 2. 通配符 * 的特殊性为0,0,0,0,它是有特殊性的:结…

CSS特殊性值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { color: red; } /* 0, 0, 0, 1*/ body h1 { color: green; } /* 0, 0, 0, 2*/ h2 { color: red; } /*…

CSS特殊性

样式的优先级取决于特殊性,特殊性为0,0,0,0 Ø每个元素或伪元素选择器贡献特殊性为 0,0,0,1 Ø每个类.伪类或者属性选择器的特殊性为 0,0,1,0 Ø每个ID选择器的特殊性为 0,1,0,0 Ø行内样式的特殊性为 1,0,0,0 Ø结合符和通配符的对特殊性为0,而继承没有特殊性比较规则 Ø从左向右依次比较,数字大的则优先级更高 Ø每个级别的优先级值是相互独立的,13个元素选择器也不会比1个类选择器的特殊性高 Ø如果相同就比较下一位,所有位都相同则优先级是一样高 Ø当选择器优先级…

小记css的margin collapsing

近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录下来,希望刚開始学习的人少走弯路. 从问题说起先给出demo的源代码和截屏,给出一个直观的印象.代码例如以下: <!DOCTYPE html> <html> <head> <style type="text/css"> html { wid…

记录：CSS特殊性——权值规则

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:…

CSS选择器的特殊性和LOVE HA

在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢? 答案就是:CSS特殊性(CSS specificity) 选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, 0, 0,具体特殊性如下: 对于内联样式声明的特殊性时,加1, 0, 0, 0 对于选择器中有给定的ID属性值时,加0, 1, 0, 0 对于选择器中有给定的类属性值.属性选择或伪类,加0, 0, 1, 0 对于选择器中有各个给定的元素和伪元素时,加0, 0, 0, 1 结合符和通配符对特殊性没有…