模块化设计样式的作用域

样式选择器的优先级是学习样式的基础知识，一起简单回顾下：

标签的权值为0,0,0,1
    类的权值为0,0,1,0
    属性选择的权值为0,0,1,1
    ID的权值为0,1,0,0
    important的权值为高1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

从上面我们可以得出两个关键的因素：

权值的大小跟选择器的类型和数量有关
    样式的优先级跟样式的定义顺序有关

了解样式的权值后有什么作用呢？比如可以这样用：举一个最简单的例子，

body{color:#555555;}.demo{color:#000000;}

<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>

模块化设计我已经提过很多了，像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。

要做好模块化，我觉得理解好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。

写过程序的同学应该都知道，变量是有作用域的，样式的定义也同样存在着作用域的问题，即定义的作用范围，很容易就能理解，如下面的p的作用域：

/*作用域：全局*/ p{text-indent:2em;}

/*作用域：.demo这个类中*/ .demo p{color:#000000;}

分享名称：模块化设计样式的作用域
转载来于：https://www.cdcxhl.com/news11/170911.html

成都网站建设公司_创新互联，为您提供小程序开发、云服务器、网站建设、电子商务、做网站、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联