举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > css 嵌套 2. 嵌套CSS 规则

css 嵌套 2. 嵌套CSS 规则

2023-05-01 10:18 Sass教程

css 嵌套 2. 嵌套CSS 规则

css 嵌套

CSS 嵌套是指在一个 CSS 样式表中,可以嵌套另一个 CSS 样式表。这样,你就可以在一个文件中定义多个样式,而不必在多个文件中定义。

CSS 嵌套的优点是,它可以让你更有效地组织你的代码,并使你的代码更易于阅读和理解。例如,如果你想要定义一个特定元素的样式(例如 div 元素),你可以将所有相关的样式都放在一起(即嵌套在 div 中)。这样做可以使你的代码更加整洁、易于阅读和理解。

div { 
    background-color: #ccc; 
    padding: 10px; 

    p { 
        font-size: 14px; 
        color: #000; 
    }

    a { 
        text-decoration: none; 
        color: #00f; 
    }  
}

2. 嵌套CSS 规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况,sass可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好,避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

上边的例子,会在输出css时把它转换成跟你之前看到的一样的效果。这个过程中,sass用了两步,每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先,把#content(父级)这个id放到article选择器(子级)和aside选择器(子级)的前边:

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}
 
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

然后,#content article里边还有嵌套的规则,sass重复一遍上边的步骤,把新的选择器添加到内嵌的选择器前边。

一个给定的规则块,既可以像普通的CSS那样包含属性,又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时,这种能力就非常有用了。

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}

容器元素的样式规则会被单独抽离出来,而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。


#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构&

阅读全文
以上是编程学为你收集整理的css 嵌套 2. 嵌套CSS 规则全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • sas 扩展 Sass 扩展

    sas 扩展 Sass 扩展

    2023-06-23 Sass教程

    您可以扩展Sass的功能,为用户提供不同类型的功能和自定义。要使用这些功能,用户应该有Ruby的知识。定义自定义Sass函数您可以在...

  • sas 扩展 Sass CSS扩展

    sas 扩展 Sass CSS扩展

    2023-04-03 Sass教程

    在本章中,我们将学习 CSS扩展。CSS扩展可以用于增强网页的功能。下表列出了SASS中使用的一些CSS扩展:序号CSS扩展和描述1 嵌套规...

  • sass定义变量 Sass 定义Mixin

    sass定义变量 Sass 定义Mixin

    2023-06-03 Sass教程

    描述 @mixin 指令用于定义mixin,它可选地包括mixin名称后面的变量和参数。例子以下示例演示如何在SCSS文件中使用 @mixin :sampl...

  • sass命令 Sass @-规则和指令

    sass命令 Sass @-规则和指令

    2023-06-07 Sass教程

    下表列出了您可以在SASS中使用的所有规则和指令。序号指令和描述1@import 它导入SASS或SCSS文件,它直接获取要导入的文件名。2@m...

  • css扩展选择器 LESS 扩展附加到选择器

    css扩展选择器 LESS 扩展附加到选择器

    2023-05-29 Less教程

    描述扩展连接到一个选择器,它看起来类似于具有选择器作为参数的伪类。 当规则集具有许多选择器时,则关键字扩展可以应用于任何...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部