【问题标题】:What is the proper syntax for child selectors with Sass? [closed]使用 Sass 的子选择器的正确语法是什么? [关闭]
【发布时间】:2015-10-12 16:50:28
【问题描述】:

我正在将我当前的 css 文件转换为 scss。我应该提到这是我第一次尝试使用 Sass,到目前为止一切进展顺利。当谈到 Sass 的子选择器时,我有一个问题。我有以下代码:

.ticker-basic.holiday2013 {
    background-color:#e4242b !important;
    color:#ffffff;
    text-decoration:none;
    font-weight:normal;
    font-size:14px;
    font-family: 'HelveticaNeueW01-85Heav', Helvetica, Arial, sans-serif;
    letter-spacing: -1px;
    text-transform: lowercase;

    p  {
        text-transform: capitalize;
    }

    p > a {
        color:#ffffff;
        text-decoration: underline;
        font-weight:normal;
        font-size:10px;
    }
}

我可以在上面的 p 标签中嵌套子标签吗?比如这样:

    p  {
        text-transform: capitalize;

        > a {
            color:#ffffff;
            text-decoration: underline;
            font-weight:normal;
            font-size:10px;
        }
    }

【问题讨论】:

  • 试试看就知道了?我不明白这里的问题是什么。
  • 这恰好是我目前无法测试的东西。它是动态提供的,我们无法尝试和查看。我希望在能够测试之前用正确的语法对其进行转换。
  • We are not human compilers,先测试再问。
  • @cimmanon 正如我所说,我无法测试此特定代码,因为受影响的 html 是动态提供的。我认为对于有 Sass 经验的人来说,这是一个简单的是或否的问题,但我找不到相关的问题可以回答。我花费了相当多的时间来帮助有需要的人,并且过去在诸如此类的事情上得到了很大的支持。对不起,如果我冒犯了任何人......

标签: css syntax sass


【解决方案1】:
p {
  > a {
  ...
  }
}

仅适用于段落元素的直接兄弟锚点,而

p {
  a {
  ...
  }
}

将应用于段落元素内的所有锚点。但这并没有像 css 或 sass 那样有任何行为变化。看来你正朝着正确的方向前进。没有比自己玩耍和学习更好的学习方式了。

【讨论】:

  • 感谢您的清晰解释。我应该提到我目前无法在本地进行测试。感谢您的意见!
猜你喜欢
  • 1970-01-01
  • 2023-01-06
  • 2021-09-09
  • 2011-12-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-09
  • 1970-01-01
相关资源
最近更新 更多