CSS 样式未生效

Question

这是 HTML：

<div id="contact-details">
    <p id="contact-details-first">
        <h3>Address:</h3>
        <ul>
            <li>238 Parsley</li>
            <li>Annlin, Pretoria</li>
            <li>South Africa</li>
        </ul>
    </p>
</div>

这是 CSS：

#contact-details {
    width: 80%;
    background-color: #ddd;
    margin: auto;
}

#contact-details-first > h3 {
    display: inline-block;
    float: left;
    border: 1px solid yellow;
}

#contact-details-first > ul {
    position: relative;
    left: 100px;
    border: 2px solid blue;
}

由于某些原因，底部的两个 css 样式没有生效。

#contact-details-first > h3
#contact-details-first > ul

Answer 1

您不能在段落中嵌套块元素。

如果您将 p 更改为 div，它会起作用，如下所示：

#contact-details {
    width: 80%;
    background-color: #ddd;
    margin: auto;
}

#contact-details-first > h3 {
    display: inline-block;
    float: left;
    border: 1px solid yellow;
}

#contact-details-first > ul {
    position: relative;
    left: 100px;
    border: 2px solid blue;
}

<div id="contact-details">
<div id="contact-details-first">
 <h3>Address:</h3>
 <ul>
  <li>238 Parsley</li>
  <li>Annlin, Pretoria</li>
  <li>South Africa</li>
 </ul>
</div>
</div>

Answer 2

ul 和 heading 不允许在 paragraph 内，将 p 标签更改为 div.

#contact-details {
    width: 80%;
    background-color: #ddd;
    margin: auto;
}

#contact-details-first  h3 {
    display: inline-block;
    float: left;
    border: 1px solid yellow;
}

#contact-details-first  ul {
    position: relative;
    left: 100px;
    border: 2px solid blue;
}

<div id="contact-details">
  <div id="contact-details-first">
    <h3>Address:</h3>
    <ul>
      <li>238 Parsley</li>
      <li>Annlin, Pretoria</li>
      <li>South Africa</li>
    </ul>
  </div>
</div>

CSS 样式未生效

CSS styling not taking effect

html

css

stylesheet