css权值和优先级+命名规范】的更多相关文章

选择器权值: 标签选择器:1 类选择器和伪类选择器:10 ID选择器:100 通配符选择器:0 行内样式:1000 !important 在一定条件下,优先级最高 常用的css样式命名 页面结构页头:header页面主体:main页尾:footer内容:content/container容器: container 导航:nav侧栏:sidebar栏目:column页面外围控制:wrapper左右中:left right center 导航导航:nav主导航:mainnav子导航:subnav顶导…
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是 选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余. 从上面我们可以得出两个关键的因素: 权值的大小跟选择器的类型和数量有关 样式的优先级跟样式的定义顺序有关 总结:…
选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式规则之后,中间用空格隔开 div{color:red !important;}…
<style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pink;}/*设置为粉色*/p span{color:purple;} </style></head><body> <h1>勇气</h1> <p class="first">三年级时,我还是一个<span>胆…
继承是没有权值的,比通配符的的权值0还要低. 选择器是不分上下级的.只管优先级. 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为0100. 第三等:代表类,伪类和属性选择器,如.content,权值为0010. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001. 通配符.子选择器.相邻选择器等的.如*.>.+,权值为0000. 继承的样式没有权值…
外部样式表<内部样式表<内联样式: HTML 标签选择器的权值为 1: Class 类选择器的权值为 10: ID 选择器的权值为 100: 内联样式表的权值最高 1000: !important权值最高: 脚本的样式最牛逼: 以上所有都一样,看顺序,后者覆盖前者.…
1.继承0.1    标签1    类选择符10    ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外部文件) 4.!important具有最高权值,p{color:red  !important;} 5.!important > 用户自己设置的样式 > 网页制作者样式 > 浏览器默认样式 6.class选择器和属性选择器同优先级. 7.像这种.dog > p多了特殊符号的,还是和 .…
CSS网站框架 复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) 主题:themes.css 表单:forms.css //模块类 头部:header.css 尾部:footer.css 或 copyright.css 针对网站的每个栏目单独写一个以栏目名称命名:xxx.css (首页.列表.内容等等) class id 组合命名 中横线“-”来连接前后单词作为…
无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自己在过后都看不懂时,就成为了交流中的障碍了.所以,有一个规范的命名规则是很重要的.命名规则有很多,大家各取所需,这里介绍一下在html/css中一些约定俗成的命名规范,权作记录: 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如class="di…
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>element M=>modifier 1.组件的子组件 用两条下划线命名 stick-man__head 2.对组件的修饰 用两条短线命名 stick-man--red 3.与js代码有关的 用js-开头命名 js-stick-man 4.使用属性 用属性名命名 [rel='js-stick-man']…