您的位置:58脚本 > 继承的高级表达 6-2. 继承的高级用法

继承的高级表达 6-2. 继承的高级用法

2023-05-19 00:32 Sass教程

继承的高级表达 6-2. 继承的高级用法

继承的高级表达 6-2. 继承的高级用法

继承的高级表达

任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承。大多数情况你可能只想对类使用继承,但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承。

接下来的这段代码定义了一个名为disabled的类,样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现:

.disabled {
  color: gray;
  @extend a;
}

假如一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说, 如果.seriousError@extend.important.error , 那么.important.errorh1.important.error 的样式都会被.seriousError继承, 但是.important或者.error下的样式则不会被继承。这种情况下你很可能希望.seriousError能够分别继承.important或者.error下的样式。

如果一个选择器序列(#main .seriousError)@extend另一个选择器(.error),那么只有完全命中#main .seriousError这个选择器的元素才会继承.error的样式,就像单个类名继承那样。拥有class="seriousError".main元素之外的元素不会受到影响。

#main .error这种选择器序列是不能被继承的。这是因为从#main .error中继承的样式一般情况下会跟直接从.error中继承的样式基本一致,细微的区别往往使人迷惑。

现在你已经了解了通过继承能够做些什么事情,接下来我们将学习继承的工作细节,在生成对应css的时候,sass具体干了些什么事情。

阅读全文
以上是58脚本为你收集整理的继承的高级表达 6-2. 继承的高级用法全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS