css - css 子类 - div 不匹配 css 规则

Question

出于某种原因，我的子类不适用于 DIV 元素？

CSS 规则匹配像 span + a 这样的内联标签，但不会匹配 div。

请看下面的例子：

<style>

.row {
    display: block;
}

.row .lbl {
    float: left;
    width: 200px;
    text-align: right;
    font-weight: bold;
    background-color: blue;
}

.row .inpt {
    float: left;
    width: 200px;
    text-align: right;
    font-weight: bold;
    background-color: red;
}


</style>

作品！！！

<p class="row">

    <span class="lbl">Title</span>
    <span class="inpt">Data</span> 

</p>

不工作！！！

<p class="row">

    <div class="lbl">Title</div>
    <div class="inpt">Data</div> 

</p>

Answer 1

对于 P 元素，w3.org 指定如下，表示 P 元素只允许包含内联元素。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

这与http://www.w3.org/TR/html401/struct/text.html#h-9.3.1一致，即 P 元素“不能包含块级元素（包括 P 本身）”。

Answer 2

我相信，因为你div是一个孩子p。如果您将其更改p为 a div，它将再次起作用。