Question

所以我有这样的事情：

<div class="main">
  <p class="red">Text 1</p>
  <p class="red">Text 2</p>
  <p class="red">Text 3</p>
  <p>Text 4</p>
  <p class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</p>
  <p class="NEXT"><span>NEXT</span></p>
  <p class="link1">Text 5</p>
  <p class="link2">www.hello.com</p>
  <p class="link3">HELLO!</p>
</div>

使用CSS代码：

* {
    margin: 0;
    padding: 0;
}

.main {
  margin: 10px auto;
  width: 250px;
    background: #e9e3d9;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
  text-align: center;
  color: #ad9e8b;
  font-size: 20px;

  .red {
    color: #ae463d;
  }

  .stars {
    padding: 10px 0px;
    color: #ae463d;
  }

  .link1 {
    font-size: 16px;
    padding-bottom: 15px;
    color: #ae463d;
  }

  .link2 {
    font-size: 14px;
  }

  .link3 {
    font-size: 20px;
  }
 }

.NEXT {
  text-align: center;
  color: #474340;
  border-bottom: 2px solid #474340; 
  line-height: 0.1em;
  margin: 0px auto;
  margin-top: 35px;
  margin-bottom: 35px;
  width: 100%;
}

span {
  background: #e9e3d9; 
  padding: 0px 15px;
}

也是一个小提琴： https://jsfiddle.net/r7s5stq6/

但是正如您可能看到的那样，CSS不适用于嵌套类。如果我删除了嵌套并只放了.red等，它就可以了。但是我现在已经坐了两个小时试图弄清楚为什么在嵌套时这不起作用......在我的脑海中，这似乎是我现在在整个网站上完成它的方式，但我的最后一页我'在制作中，这恰好发生了，我无法看出我做错了什么或者这里到底出了什么问题。我尝试过使用+和p.red，但这也无济于事。也许是因为它太晚了，但我真的无法弄明白：D

我在这里做错了什么？

是的，我非常喜欢嵌套，因为我不必担心在其他地方使用常见的类名。

Answer 1

在纯CSS中，如果你想要嵌套类似于

.class1, .class2 {
  # some stuff
}
.class2 {
  # some more stuff
}

或者您可能需要使用SASS，LESS，Stylus

Answer 2

只需添加“}”，您可以通过发布此

来取笑

Answer 3

嗨请检查您是否已经使用以下命令观察/编写scss脚本：

sass --watch stylename.scss：stylename.css

确保在命令行框中运行它。

还要确保您在css中调用的元素是iniside nest元素。

像

<div class="sample><p id="red"></p></div>

你这样筑巢：

.sample{background#000; #red{color:red;} }

Answer 4

这是工作CSS代码

    * {
    margin: 0;
    padding: 0;
}

.main {
    margin: 10px auto;
    width: 250px;
    background: #e9e3d9;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
    text-align: center;
    color: #ad9e8b;
    font-size: 20px;
}

.red {
    color: red !important;
}

.stars {
    padding: 10px 0px;
    color: #ae463d;
}

.link1 {
    font-size: 16px;
    padding-bottom: 15px;
    color: #ae463d;
}

.link2 {
    font-size: 14px;
}

.link3 {
    font-size: 20px;
}




.NEXT {
    text-align: center;
    color: #474340;
    border-bottom: 2px solid #474340; 
    line-height: 0.1em;
    margin: 0px auto;
    margin-top: 35px;
    margin-bottom: 35px;
    width: 100%;
}

span {
    background: #e9e3d9; 
    padding: 0px 15px;
}

关闭括号时遇到问题。

SCSS嵌套不起作用

4 个答案: