举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > 选择器选择父元素 2-1. 父选择器的标识符&

选择器选择父元素 2-1. 父选择器的标识符&

2023-06-24 13:18 Sass教程

选择器选择父元素 2-1. 父选择器的标识符&

选择器选择父元素 2-1. 父选择器的标识符&

选择器选择父元素

一般情况下,sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(articleaside)形成(#content article#content aside)。这种在CSS里边被称为后代选择器,因为它选择ID为content的元素内所有命中选择器articleaside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

最常见的一种情况是当你为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接。比如说,下面这种情况sass就无法正常工作:

article a {
  color: blue;
  :hover { color: red }
}

这意味着color: red这条规则将会被应用到选择器article a :hoverarticle元素内链接的所有子元素在被hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。

解决之道为使用一个特殊的sass选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号,且可以放在任何一个选择器可出现的地方,比如h1放在哪,它就可以放在哪。

article a {
  color: blue;
  &:hover { color: red }
}

当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:

article a { color: blue }
article a:hover { color: red }

在为父级选择器添加:hover等伪类时,这种方式非常有用。同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过JavaScript标签上添加一个ie的类名,为这种情况编写特殊的样式如下:

#content aside {
  color: red;
  body.ie & { color: green }
}


#content aside {color: red};
body.ie #content aside { color: green }

sass在选择器嵌套上是非常智能的,即使是带有父选择器的情况。当sass遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。


阅读全文
以上是编程学为你收集整理的选择器选择父元素 2-1. 父选择器的标识符&全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • 什么时候使用混合溶剂 5-1. 何时使用混合器

    什么时候使用混合溶剂 5-1. 何时使用混合器

    2023-05-10 Sass教程

    利用混合器,可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成优良的混...

  • css 嵌套 2. 嵌套CSS 规则

    css 嵌套 2. 嵌套CSS 规则

    2023-05-01 Sass教程

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

  • 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...

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