0

我正在尝试制作一个非常基本的 HTML/CSS/JS 小部件，但 CSS 层存在一些问题。似乎我无法编写有效的选择器，并且变得非常恼人。特别是，我试图覆盖从小部件的 body css 选择器继承的字体大小设置。我的 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 呢？我只想量化背部，无论它们是什么标签。

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

4

2 回答 2

1

试试这个：

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

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

但是如果你写

    .flashcard p { ... }

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

    <div class="flashcard">
          <p>...</p>
    </div>
于 2013-09-18T20:19:05.317 回答
1

如果您希望以附加类的节点为目标，则语法为

elementname.classname {...}

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

我不确定你所说的“量化背部”是什么意思，但如果你只是想定位一个带有“背部”类的元素，你可以这样定位它：

.back {...}

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

.flashcard .back {...}
于 2013-09-18T20:19:10.147 回答