小编说:给自己补补课,高手可以略过。这里介绍一下我学CSS的技巧,可以粗略看一下CSS的手册,多去用一下DW的CSS工具,用多了,自然对样式表熟悉了。
此文大量参考polaris的CSS文章《CSS选择器、优先级与匹配原理》
1.选择器类型
☆标签选择器(Tag selector),如:p{}
☆类选择器(Class selector),如.style1 { }
☆ID选择器(ID selector),如#id1{}
☆后代选择器(Descendent selectors),如 h3 em { }
☆群组选择器(Grouping selectors),selector1,selector2,selector3...{}
如:p, h1, h2 { text-align: left; } 或者p.navigation, h1#title { font-weight : bold; }
2.选择器的优先级别
假设
标签选择器的优先级为1
类选择器的优先级为10
ID选择器的优先级为100
html style优先级1000
div.style1 span li 优先级 = 1 + 10 + 1 + 1
span#xxx.songs li 优先级 = 1 + 100 + 10 + 1
#xxx li 优先级 = 100 + 1
最终LI的样式执行的是span#xxx.songs li的样式定义。
3.简洁、高效的CSS
尽量单独运用ID选择器和CLASS选择器,前面别加标签定义,让CSS选择器看起来更简洁高效。
4.CSS网站布局设计
参考 http://www.52css.com/article.asp?id=185
分享到:
相关推荐
作为一个Web开发者,掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题,为了广大web爱好者可以更好的解决问题,这里就CSS选择器的优先级问题做了一些总结
一、五大基本选择符 ...2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,
优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的...
优先级是由选择器组成的匹配规则决定的。 如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值. 如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档...
一、全浏览器支持的css选择器(由于很好理解,demo省略)1.* *... } 2.#X #+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为java
方式一:值相加 我们先去MDN看看官方的解释: 优先级是如何计算的? 优先级就是分配给指定的 CSS 声明的一个权重,它由...我们再来看选择器优先级关系:ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器
由上可知,选择器指定的越具体,那么他的优先级就越高, 在这里,我们来总结一下css的选择器: 一、基本选择器(标签选择器、通用选择器、类和ID选择器) 选择器 描述 CSS版本 E 标签选择器,匹配所有使用E...
2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开...
自动将导入样式表中的所有css选择器与JSX模板中的节点配对,而无需任何手动步骤 不创建全局范围,所有样式都与导入它们的组件紧密绑定 可与将创建类名字符串(例如类名)的任何实用程序一起使用 安装 npm install ...
/css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存...
14.9.3 继承和上下文选择器 14.10 定位元素和层 14.10.1 绝对定位 14.10.2 〈div〉容器 14.10.3 绝对定位 14.10.4 相对定位 14.10.5 z索引和三维 14.11 如何与JavaScript融合...
• 6.22.htm 字符串转换与匹配 • 6.23.htm Date对象的方法 • 6.24.htm toString方法 • 6.25.htm with语句 • 6.26.htm for…in语句调用对象属性 • 6.25....
• 6.22.htm 字符串转换与匹配 • 6.23.htm Date对象的方法 • 6.24.htm toString方法 • 6.25.htm with语句 • 6.26.htm for…in语句调用对象属性 • 6.25....
• sample08.htm 变量的优先级 • sample09.htm 随处定义的变量 • sample10.htm 随处定义的变量 • sample11.htm 嵌套函数中变量的有效范围 • sample12.htm 变量没有语句...
默认项目定义了这个文件中与 其他项目不相符时的顺序清单位置。 注释字符是 ';'. 在 Windows 中,这个文件应该放在 RAR 所在的或 %APPDATA%\WinRAR 目录中, 在 Unix 中- 放在用户的 home 目录或在 /etc 中。 ...
为选项选择使用电子邮件地址的选项,删除了“标题”选择器。 5.5版-修正了DueDate和ScheduledOn被翻转的问题。 5.6版-修正了Mojo API 5.7版,5.8版和5.9版中的日期更改-添加了一些代码以趋向Firefox扩展6.0版-从内容...
路由优先级 - 18 - 服务器静态资源 - 18 - staticDir: mapping - 18 - staticFile: mapping - 19 - URL 编码 - 19 - 反转路由:用于生成某些URL - 19 - 设置内容风格(CSS) - 20 - HTTP 内容协商 negotiation - 21 - ...
1.12 理解操作符的优先级和结合性: 1.13 使用可变函数 1.13.1 测试和设置变量类型 1.13.2 测试变量状态 1.13.3 变量的重解释 1.14 根据条件进行决策 1.14.1 if语句 1.14.2 代码块 1.14.3 else语句 1.14.4 elseif...