&使用问题

来源:17-5 右侧食品列表布局(3)

xzxiang

2017-08-01

老师,在写food-item中的extra样式时,您写选择器选择icon类时用了stylus的&符号,但我发现这样写,样式并没有加进去,反而是去掉&符号后margin样式才显出来;但前面有的地方去掉&符号,样式就不见了。我想问一下,什么时候该用&符号呢?

写回答

3回答

小感冒

2017-08-02

回复 慕粉1613479704:

1.能不能写和它等价的代码?:可以。比如上面我写的等价于那段代码。,但是既然使用了stylus,我们为什么还要去使用非stylus语法的写法呢?。

2.为什么有时候必须用&符号才行? : 不是必须。&符号说白了,就是父元素。 出现书写其他等价代码无效,请检查书写格式是否正确。

比如下面红色框起来的,使用了&符号,这样我们得到的效果就是,“ I am wrapper”和"text1文字" 变为了红色,"text2文字"没有变色,说明在这里 &就是等于.wrapper,也就是说的等于父元素。

//szimg.mukewang.com/59812ebb0001ae4009440572.jpg

//szimg.mukewang.com/59812efa0001d2c809620090.jpg

当然,如果你不想使用 &符号,就需要这样写,达到的效果是一样的。//szimg.mukewang.com/5981301d0001c3d707360196.jpg


0
0

小感冒

2017-08-02

另外,我们可以拿课程中的一段css来验证,这是弹出购物车后显示的遮罩样式动画,&符号显示的写成.list-mask依旧是有效的。

//szimg.mukewang.com/598132550001c0a807760458.jpg

0
1
xzxiang
多谢了 兄弟
2017-08-02
共1条回复

小感冒

2017-08-01

&指向父级选择器 ,例如

a 
 color: red
 &:hover
   color: yellow

就等于

a {
 color: red
}
a:hover {  
    color: #000;
}


0
1
xzxiang
兄弟 谢谢哈 但我搞不懂的是为什么有时候必须用&符号才行 而不能写和它等价的代码
2017-08-01
共1条回复

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程