Question

我正在尝试创建一个非常基本的HTML / CSS / JS小部件，但我遇到了一些CSS层问题。似乎我无法编写有效的选择器，而且它变得非常恶化。特别是，我试图覆盖从小部件的body css选择器继承的font-size设置。我的HTML（实际上，它是哈姆雷特）是：

<div class="container">
  <div id="flashcard-container">
    <div class="span6 offset3 well flashcard">
      <div class="front">
        <p class="flashcard">This is the front of the card.

我的CSS文件说：

.flashcard p {
  font-size: 24px;
}

div .back {
  display: none;
}

实际上，我对两个选择器都有问题。特别是，第一个不能与xml结构匹配。第二个似乎不是最佳的。为什么我需要指明我在说一个div呢？我只想量化背面，无论它们是什么标签。

我意识到这是非常基本的，但我认为在这个和一些Chrome错误之间有3d过渡，我让自己非常困惑。自从我处理前端以来已经很多年了。：（

Answer 1

试试这个：

    p.flashcard { ... }
    div.back { ... }

实际上我在代码中看不到带后台的div。你也可以使用.flashcard和.back。指定div或p只是缩小选择范围。如果你指定.flashcard，它将被应用于，比如，或。

但如果你写

    .flashcard p { ... }

这意味着您选择了.flashcard的所有后代，例如：

    <div class="flashcard">
          <p>...</p>
    </div>

Answer 2

如果您希望定位附加了类的节点，则语法为

elementname.classname {...}

（尽管OOCSS狂热分子建议只使用.classname并使你的CSS在结构上不可知）。

我不确定你的'量化背面'是什么意思，但是如果你只是想要一个带有'后退'类的元素，你可以这样定位它：

.back {...}

虽然最好将样式包含为'back'是一个相当通用的类名：

.flashcard .back {...}

覆盖CSS属性

2 个答案: