Movatterモバイル変換


[0]ホーム

URL:


codecamp

2-3. 子组合选择器和同层组合选择器:>、+和~

上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

article section { margin: 5px }article > section { border: 1px solid #ccc }

你可以用子组合选择器>选择一个元素的直接子元素。上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

在下例中,你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或里层选择器前边:

article {  ~ article { border-top: 1px dashed #ccc }  > section { background: #eee }  dl > {    dt { color: #333 }    dd { color: #555 }  }  nav + & { margin-top: 0 }}

sass会如你所愿地将这些嵌套规则一一解开组合在一起:

article ~ article { border-top: 1px dashed #ccc }article > footer { background: #eee }article dl > dt { color: #333 }article dl > dd { color: #555 }nav + article { margin-top: 0 }

sass中,不仅仅css规则可以嵌套,对属性进行嵌套也可以减少很多重复性的工作。

2-2. 群组选择器的嵌套
2-4. 嵌套属性
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

sass 教程

4. 静默注释

7. 小结

sass 相关教程

关闭

MIP.setData({'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false},'pageFontSize' : getCookie('pageFontSize') || 20});MIP.watch('pageTheme', function(newValue){setCookie('pageTheme', JSON.stringify(newValue))});MIP.watch('pageFontSize', function(newValue){setCookie('pageFontSize', newValue)});function setCookie(name, value){var days = 1;var exp = new Date();exp.setTime(exp.getTime() + days*24*60*60*1000);document.cookie = name + '=' + value + ';expires=' + exp.toUTCString();}function getCookie(name){var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null;}
[8]ページ先頭

©2009-2025 Movatter.jp