解开CSS Framworks的结构

Question

我正在开发我的第一个实用程序类，或者可能是一些微框架。如果我得到这样的标记：

<div class="even-columns wrap on-desktop">
<div class="item">
<div class="item">
</div>

我认为这通常与一个类或ID的部分或某物有关。所以我会像一样编写我的(S(CSS

.section_A {
.item {
.myNameA {
background-color:#000;
color:#FFF;
}
.myNameB {
background-color:#FFF;
}
}
}

<div class="item myNameA"></div>

最后在HTML中的Class项之后添加新的样式Class。这是框架的工作方式，还是我做错了什么？

Answer 1

大多数html元素都有开始和结束标记，在这段代码中，我可以看到你不能像一样屏蔽这个项目的div标记

<div class="item"></div>
<div class="item"></div>

在您的样式标记中有一些问题，比如在父div标记中有两个子标记，但您设置了错误的子元素样式。

如果你在html代码中添加一个区段标签，那么它看起来像这个

.section_A {
.even-columns {
.item {
background-color:#000;
color:#FFF;
}
}
}

<section class="section_A>
<div class="even-columns wrap on-desktop">
<div class="item"></div>
<div class="item"></div>
</div>
</section>

注意：如果您有任何疑问，欢迎！