Sass:使用多个嵌套选择器选择父元素

2024-05-07

这就是我最终想要做的:

.books, .dvds, .magazines {
  article &.books {
    /* Wanting the selector to only be ".books article" */
  }
  article {
    /* Can apply to any of the `article` tags under .books, .dvds and .magazines */
  }
}

我有一些嵌套的选择器,而不是打破一个新的.books article选择器,我想让它们嵌套,但仍然只是目标article下的元素.books.

我确实尝试过这个,它有效,但输出是.books.books article,这是多余的,让我感到畏缩:

.books, .dvds, .magazines {
    &.books article {
        /* Outputs ".books.books article, .dvds.books article, .magazines.books article"...boooo, hisssss */
    }
}

更像这样的东西怎么样:

article {

  .books &,
  .dvds &,
  .magazines & {
    /* book, dvd, magazine shared stuff */
  }

  .books & {
    /* book stuff */
  }

}

编译为:

.books article, .dvds article, .magazines article {
  /* book, dvd, magazine shared stuff */
}
.books article {
  /* book stuff */
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Sass:使用多个嵌套选择器选择父元素 的相关文章

  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都

随机推荐

  • java中如何查找两个时间戳的差异?

    我有一个ArrayList包括多个时间戳 目的是找到第一个和最后一个元素的差异ArrayList String a ArrayList get 0 String b ArrayList get ArrayList size 1 long d
  • 具有最小长度的 TypeScript 数组

    如何在 TypeScript 中创建只接受具有两个或更多元素的数组的类型 needsTwoOrMore onlyOne should have error needsTwoOrMore one two should be allowed n
  • 使用 IntelliJ 的 Cucumber 找不到步骤定义

    我遇到了以下问题 我在 IntelliJ 中有四个 Cucumber 功能文件 我通过 IntelliJ 插件添加了 Cucumber 支持 创建功能后 我按如下方式编辑了配置 以便可以执行功能文件 Glue should be the n
  • 如何将 tkinter 窗口放在其他窗口之上?

    我正在使用 Python 2Tkinter and PyObjC 然后我用py2app 该程序工作正常 但每当我打开该程序时 该窗口都会以隐藏状态开始 因此直到我单击扩展坞上的图标将其调出时 它才会出现 有什么方法可以控制这个 使窗口位于应
  • 相当于 Rcpp 中的 'which' 函数

    我是 C 和 Rcpp 的新手 假设我有一个向量 t1 lt c 1 2 NA NA 3 4 1 NA 5 我想获得 t1 的元素索引NA 我可以写 NumericVector retIdxNA NumericVector x Step 1
  • Redhat Vim 中的可视化块插入

    我的 ec2 服务器附带了 redhat vim ec2 user vim version VIM Vi IMproved 7 2 2008 Aug 9 compiled Jul 7 2012 08 03 48 Included patch
  • 在 Java 中加载和缓存图像的最佳方法是什么?

    我有超过一千个 16 x 16 像素图块图像的大量集合 我在 Java 中制作的游戏需要这些图像 在不耗尽 JVM 可用内存的情况下存储切片的最佳方法是什么 我认为生成 1000 BufferedImages 可能并不明智 保持图像准备就绪
  • 如何默认显示带有手动(键盘)输入的时间选择器对话框?

    时间选择器对话框默认显示循环计时以选择日期和时间 相反 它需要默认显示键盘输入来选择日期和时间 在以圆形样式显示时间选择器对话框时 它具有键盘图标 可将圆形样式更改为手动输入样式 Android Oreo 操作系统设备可使用此功能 如何在支
  • 如何使用高复制数据存储

    好的 我已经看过了video http www google com events io 2011 sessions more 9s please under the covers of the high replication datas
  • 在Fragment中第一次调用时SharedPreferences为空

    我有一个示例 Android 应用程序 根据位置 邮政编码 和设置 SharedPreference 中设置的温度单位 该应用程序显示 7 天的天气 当应用程序第一次获取温度并检查 SharedPreference 中设置的温度单位时 它似
  • 适用于 iOS 的最佳存档器库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个可在我的 iOS 应用程序中使用的存档器库 zip 或其他格式 就以下方面而言 最好的图书
  • XNA:Unload() 的意义是什么?

    XNA 游戏有一个Unload 方法 其中内容应该被卸载 但这有什么意义呢 如果所有内容都被卸载 那么游戏一定会退出 在这种情况下 无论如何 所有内容都会被垃圾收集 对吗 据我了解 它对于任何标准用途都没有用 因为正如您所说 垃圾收集器为您
  • 强制routerlink刷新组件

    我创建了一个非常基本的 Angular 5 应用程序 我有一个始终显示的左侧菜单 它是带有引导程序的 asp net core2 0 mvc 项目骨架的一部分 我在此菜单中创建了 2 个链接 li a Component 1 a li li
  • Jquery获取javascript文件而不运行

    我想使用 jquery 获取文件的内容 通常我可以使用 get file function data alert data 当我尝试获取 javascript 文件时 jquery 在返回回调之前运行 javascript 代码 如何在不运
  • 离子动态列表分隔符

    我已经被这个问题困扰了一段时间 所以我希望你能让我朝正确的方向前进 我的角度工厂返回一个看起来像这样的对象 name Fall year 20xx id some id 这是一个学期列表 每个学期都有一个对象 其中包含名称 年份和学期 ID
  • 具有相同属性名称的 AutoMapper TwoWay 映射

    给定这两个对象 public class UserModel public string Name get set public IList
  • 当表单操作转到第三方网站时将数据传递到“谢谢”页面

    我有一个网络表单 它收集用户的邮政编码作为字段之一并将其发布到第三方网站
  • Fedora 21 带 clang,不带 gcc

    你能 合理地 让 Fedora 21 变得只有 llvm clang libc libc abi 吗 我发现有些东西暗示不可以 但它们都已经有 3 岁了 从那时起 llvm clang 已经取得了长足的进步 通过全新安装 我尝试了 yum
  • 使用 GLSL 着色器在同一片段着色器中定义的多个子例程类型无法正常工作

    我正在开发一个使用 GLSL 着色器的程序 我编写了 2 种不同的方法来用 2 种不同的方法计算 ADS 环境光 漫反射 镜面反射 着色 为了正确完成这项工作 我使用子例程来使用一种或另一种方法来计算 ADS 着色 这是片段着色器代码的一部
  • Sass:使用多个嵌套选择器选择父元素

    这就是我最终想要做的 books dvds magazines article books Wanting the selector to only be books article article Can apply to any of