在其中设置样式文本

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

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

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

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

  h1 {
    color: green;
  }   
}

与h1嵌套在.fleft。

如果你正在使用Sass或Less，这是可以接受的，也许就是这种情况，但你没有在问题中提到这一点。

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

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

.fleft h1,
.fright h1 {
  color: green;
}

其中.fleft h1和.fright h1将在h1和.fleft类中选择所有.fright标签。

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

.wrap {
  width: 100%;
  overflow: auo; // should be auto
}

Answer 2

你有h1样式定义指定错误...试试这个：

.fleft h1 {
  color: green;
}

.fright h1 {
  color: red;
}

完整的例子at this fiddle