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 Inspect功能，请参阅CSS的右侧框。 generalContainer和oath-takingContainer之间的区别。前者得到承认，但后者未得到承认。

Answer 1

因为你无法检查section.oath-takingContainer，因为它被CSS直接放在下面另一个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>