为什么有时页面css无法正常工作，就像这种情况一样？

Question

正如你在图片和这个小提琴中所看到的http://jsfiddle.net/W5Yu4/我在HTML部分编写了css样式和类，但它无法正常工作，就像它不能识别css类一样。

.model-landing-page .explore-wrapper {
width: 930px;
margin-bottom: 20px;
float: left;
border: solid 5px #96172e;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 10px;
}

我在这里做错了什么？

Answer 1

您的样式正在寻找一个包含在类.explore-wrapper的元素中的类.model-landing-page的元素。我没有在您的HTML中看到.model-landing-page，请尝试将此类添加到您的身体中。

Answer 2

该CSS仅适用于explore-wrapper中包含的类model-landing-page的内容。我没有在model-landing-page类的HTML中看到任何内容。

如果您想申请任何一个班级，规则应为：

.model-landing-page, .explore-wrapper {
  /* ... */
}

或只是

.explore-wrapper {
  /* ... */
}

如果你根本不在乎外层阶级。

Answer 3

也许是因为你正在使用

.model-landing-page .explore-wrapper

而你的html只显示

.explore-wrapper

将它们放在彼此之后意味着它们是嵌套的。所以基本上它正在寻找.explore-wrapper里面.model-landing-page，哪个不存在

Answer 4

JsFiddle在HTML部分中没有正文，因此您的html中不存在.error-page和.model-landing-page类。 如果你删除这些类，一切都很好：Demo