html - 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

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

如果您将 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>