this codepen有一个css选择器&:hover
该选择器匹配什么?'&'选择器选择什么?
回答
我相信&符号是Sass功能。从文档:
Referencing Parent Selectors: &
有时它不是默认 的方式来使用嵌套规则的父母选择是非常有用的。例如,您可能希望在选择器悬停时或 元素具有特定类时使用特殊的 样式。在这些情况下,可以明确指定 字符在哪里插入父选择器。
正是。在萨斯你可以有这样的事情...
div {
background: green;
p {
background: red;
&:hover {
background: blue;
}
&:active {
background: blue;
}
}
}
...,当转换为CSS会变成这样:
div {
background: green;
}
div p {
background: red;
}
div p:hover {
background: blue;
}
div p:active {
blue;
}
编辑:从&悬停:到&:悬停
在你的第二个代码块,不应该是'div p:hover {background:blue; }'和'div p:active {background:blue; ''?我只是提到它来清除它... – Beat
是的。当然。我道歉。愚蠢的错误。固定。 – banzomaikaka
一个不太广为人知的用法是,您可以将&符号添加到样式的末尾,以便父代选择器成为子代。
如:
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
变,
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
您可以在此处详细了解
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
- 1. jquery选择器和js选择器有什么区别?
- 2. ID选择器为什么利用类选择器?
- 3. 取消选择什么在输入选择用。选择()
- 4. 这个选择器是什么选择“#dialog:ui-dialog”?
- 5. 这个选择器选择什么:$('[Id * = txtSomeInput]')?
- 6. 为什么这jQuery选择器不选择textarea?
- 7. 选择CSS选择器
- 8. ListFragment选择器选择
- 9. 构建:选择选择器
- 10. PHP选择形式,如果选择匹配,那么什么让它选择
- 11. 为什么Angular默认不选择正确的选择选项?
- 12. 选择器的需求是什么?
- 13. 什么是选择序列化器
- 14. redux中的选择器是什么?
- 15. ``[lang]`选择器有什么作用?
- 16. 为什么jQuery选择器不工作?
- 17. 这些选择器有什么区别?
- 18. 这个ngrx选择器在做什么?
- 19. 选择器的含义是什么?
- 20. 这个css选择器做了什么?
- 21. 我需要什么CSS选择器?
- 22. 什么容器可供选择
- 23. 什么是正确的jQuery选择器?
- 24. XPath:可以选择什么?
- 25. 什么是选择'X'?
- 26. OpenGL vs Cocos2d:选择什么?
- 27. 为什么选择AsyncCallback?
- 28. 什么是jQuery选择
- 29. outer selectAll:选择了什么?
- 30. 要选择什么版本?
&使用,如果你仔细看,你很可能已经看到,有(SCSS)写在CSS选项卡标题旁边。 –
@Truth:假设评论是针对我的,那么是的:我确实看到了。然而,我在这个问题本身中提出了明确的陈述:“......有一个CSS选择器&:hover'”。不过,也许我应该说得更清楚些。 –
我正在参加OP –