Question

我是Sass的新手，我遇到以下语法问题。

我的HTML

<a href="#element">Click here</a>
<div id="element"></div> //corrected div syntax

我的萨斯

body
  background-color: yellow
#element
  width: 200px
  height: 200px
  background-color: white

#element
  &:target
    background-color: black
    body
      background-color: green

我的目标是，当点击click here时，我希望div背景为黑色，正文background color为green。 div background已转向black，但正文background-color尚未更改。你能帮我解决一下吗？

Answer 1

在Sass中，嵌套规则只能应用于外部元素的子元素。就像标准的CSS一样，我们不能根据孩子的风格设置父母。

您的HTML需要看起来像：

<body id="element">
    <a href="#element">Click here</a>
    <a href="#target_this_one">Click here</a>
    <div id="subelement"></div>
</body>

然后在萨斯：

body:target 
    background-color: green
    & #subelement 
        background-color: black

或SCSS：

:target {
    background-color:green;
    &#subelement {
        background-color:black;
    }
}

CodePen

嵌套元素的问题

1 个答案: