css - 无法识别 CSS 中的某些部分

Question

为什么有时无法识别 CSS 中的某些部分，有时却可以？我的代码如下:

<section class="generalContainer"><time>8 September 2016</time></section>
<section class="oath-takingContainer"><time>12 October 2016</time></section>

section.generalContainer {
    position: absolute;
    width: 100%;
    text-align: center;
    margin: -15px 0 10px -15px;
    padding: 5px 0 5px 0;
    background: #868A08;
    }

section.oath-takingContainer {
position: absolute;
width: 100%;
text-align: center;
margin: -15px 0 10px -15px;
padding: 5px 0 5px 0;
background: #08088A;
}

网站只承认section.generalContainer，不承认oath-takingContainer。我使用了 Chrome 检查功能，请查看 CSS 的右侧框。 generalContainer 和 oath-takingContainer 的区别。前者被识别，后者不被识别。

Answer 1

因为您无法检查 section.oath-takingContainer，因为它被 CSS 直接放置在另一个 div 下方...您实际上无法右键单击并“检查”它。

为了清晰起见，我在这里应用了更亮的颜色，并将下方的 div 从上方的 div 移开，现在可以正常检查了。

section.generalContainer {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: -15px 0 10px -15px;
  padding: 5px 0 5px 0;
  background: red;
}

section.oath-takingContainer {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: -15px 0 10px -15px;
  padding: 5px 0 5px 0;
  background: pink;
  top: 50px;
}

<section class="generalContainer"><time>8 September 2016</time></section>
<section class="oath-takingContainer"><time>12 October 2016</time></section>