Question

我试图找到相关的东西，但我不确定我是否忽略了正确的答案，因为我是HTML或CSS的新手，或者之前没有被问过。

我正在尝试开发自己的网站，目的是将其拆分。我到目前为止已经到了;

.wrap {
  width: 100%;
  overflow: auo;
}

.fleft {
  float: left;
  width: 40%;
  background: gray;
  height: 100vh;
}

.fright {
  float: right;
  width: 60%;
  height: 100vh;
}

.fleft {
  float: left;
  width: 40%;
  background: gray;
  height: 100vh;
  h1 {
    color: green;
  }
}

<div class="wrap">
  <div class="fleft">
  </div>
  <div class="fright">
  </div>
</div>

但每当我指定h1，h3等标签的颜色时，我都会收到错误。 IE;

带有“冒号预期”错误或“未知属性”。我是否必须在.fleft之外指定这些颜色，如果我这样做，我如何更改两个标题中的标题颜色？

Answer 1

您指定了h1样式定义错误...试试这个：

.fleft h1 {
  color: green;
}

.fright h1 {
  color: red;
}

完整示例at this fiddle

Answer 2

看起来你的CSS有语法问题（和一个错字，但这不是问题）。

问题：如果您使用纯CSS，则不能嵌套以下规则：

.fleft {
  float:left; 
  width: 40%;
  background: gray;
  height: 100vh;   

  h1 {
    color: green;
  }   
}

<{1}}的

嵌套在h1中。

如果您使用Sass或Less，这将是可以接受的，也许就是这种情况，但您在问题中没有提及。

要解决此问题，您需要使用子选择器，例如：

.fleft

其中.fleft { float:left; width: 40%; background: gray; height: 100vh; } .fleft h1, .fright h1 { color: green; }和.fleft h1将选择.fright h1和h1类中的所有.fleft个标记。

此外，您在其中一个值中输入了拼写错误。

.fright

在<div>中设置样式文本

2 个答案: