.error.instruction 这种形式在html中是怎么用的?

来源:4-1 sass语法介绍(进阶篇)

扇扇要努力

2016-01-24 22:58

.error.instruction 这种形式在html中是怎么用的?

写回答 关注

1回答

  • 西域码农
    2016-01-26 12:03:14

    这个问题我也遇到了,专门研究了一下

    CSS中这样写表示定义的是两个类的交集样式

    http://img.mukewang.com/56a6e6cd0001efe401990339.jpg

    在html中也是添加多个类名并列(试了一下,顺序还可以互换)的调用方式

    56a6e7df0001153105000063.jpg

    此时权重会发生改变,  .class1和.class2的权重是1,而.class1.class2的权重为2(即最高),页面加载时会优先使用权重高的,即自己定义的交集样式,而不是.class2的样式

    显示效果:

    http://img.mukewang.com/56a6e8050001faae02090053.jpg

    -----------------------------------------------------------------------------------------------------------------

    对比以下另一种情况,理解会更深刻

    假设CSS不定义交集样式.class1.class2,看看是什么情况

    http://img.mukewang.com/56a6e8bf0001845501810219.jpg

    html调用过程相同

    http://img.mukewang.com/56a6e95e000195be06790084.jpg

    此时  .calss1和.calss2的权重是1,.class2写在后面会覆盖掉.class1的样式

    显示效果:

    http://img.mukewang.com/56a6e9dc0001305502300051.jpg

    ----------------------------------------------------------------------------------------------------------

    总结,这种类选择器交集的写法适合特定的应用场景,比如同时满足class1和class2的元素时候又不想定义第三种类的时候(还有就是ie6不支持两个连续并列class类名),我也没有实践过这种写法,感觉不好理解(可能我没碰到适合这样的应用场景),我一般写下面这种写法,比较益于理解,可扩展和可维护性也高。

    http://img.mukewang.com/56a6ee0300016ec502390539.jpg

    http://img.mukewang.com/56a6ee220001568d04620085.jpg

    http://img.mukewang.com/56a6edd80001a8b703160031.jpg

Sass和Compass必备技能之Sass篇

Sass与Compass初体验,初恋即深恋,助您写出更优秀的CSS

29320 学习 · 98 问题

查看课程

相似问题