`
wangking717
  • 浏览: 256514 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

CSS选择器、优先级与匹配原理

阅读更多

小编说:给自己补补课,高手可以略过。这里介绍一下我学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

 

 

分享到:
评论

相关推荐

    CSS选择器种类、优先级与匹配原理详解

    作为一个Web开发者,掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题,为了广大web爱好者可以更好的解决问题,这里就CSS选择器的优先级问题做了一些总结

    你不可不知的CSS选择器

    一、五大基本选择符 ...2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,

    举例详解CSS中的的优先级

    优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的...

    浏览器如何判断css优先级

    优先级是由选择器组成的匹配规则决定的。 如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值. 如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档...

    30个你不可不知的CSS选择器小结

    一、全浏览器支持的css选择器(由于很好理解,demo省略)1.* *... } 2.#X #+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为java

    CSS优先级的两种理解方式

    方式一:值相加   我们先去MDN看看官方的解释: 优先级是如何计算的? 优先级就是分配给指定的 CSS 声明的一个权重,它由...我们再来看选择器优先级关系:ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器

    CSS中的选择器种类总结及效率比较

    由上可知,选择器指定的越具体,那么他的优先级就越高, 在这里,我们来总结一下css的选择器: 一、基本选择器(标签选择器、通用选择器、类和ID选择器) 选择器 描述 CSS版本 E 标签选择器,匹配所有使用E...

    css入门笔记

    2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开...

    react-native-cascade

    自动将导入样式表中的所有css选择器与JSX模板中的节点配对,而无需任何手动步骤 不创建全局范围,所有样式都与导入它们的组件紧密绑定 可与将创建类名字符串(例如类名)的任何实用程序一起使用 安装 npm install ...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存...

    JavaScript详解(第2版)

     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融合...

    精通JavaScript

    • 6.22.htm 字符串转换与匹配 • 6.23.htm Date对象的方法 • 6.24.htm toString方法 • 6.25.htm with语句 • 6.26.htm for…in语句调用对象属性 • 6.25....

    精通javascript

    • 6.22.htm 字符串转换与匹配 • 6.23.htm Date对象的方法 • 6.24.htm toString方法 • 6.25.htm with语句 • 6.26.htm for…in语句调用对象属性 • 6.25....

    《javaScrip开发技术大全》源代码

    • sample08.htm 变量的优先级 • sample09.htm 随处定义的变量 • sample10.htm 随处定义的变量 • sample11.htm 嵌套函数中变量的有效范围 • sample12.htm 变量没有语句...

    rar压缩软件.rar

    默认项目定义了这个文件中与 其他项目不相符时的顺序清单位置。 注释字符是 ';'. 在 Windows 中,这个文件应该放在 RAR 所在的或 %APPDATA%\WinRAR 目录中, 在 Unix 中- 放在用户的 home 目录或在 /etc 中。 ...

    Mojo帮助扩展的集体偏见。「Mojo HelpDesk Extension by Collective Bias」-crx插件

    为选项选择使用电子邮件地址的选项,删除了“标题”选择器。 5.5版-修正了DueDate和ScheduledOn被翻转的问题。 5.6版-修正了Mojo API 5.7版,5.8版和5.9版中的日期更改-添加了一些代码以趋向Firefox扩展6.0版-从内容...

    play框架手册

    路由优先级 - 18 - 服务器静态资源 - 18 - staticDir: mapping - 18 - staticFile: mapping - 19 - URL 编码 - 19 - 反转路由:用于生成某些URL - 19 - 设置内容风格(CSS) - 20 - HTTP 内容协商 negotiation - 21 - ...

    PHP和MySQL WEB开发(第4版)

    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...

Global site tag (gtag.js) - Google Analytics