Question

在下面的示例中，我有一个内联css标记，用于指定字体样式，颜色和大小。但是，列表后面的所有内容都不会显示css标记的属性。我做错了什么？

        <div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;">
        Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
        return it to us in the original packaging and, once we receive it, we will gladly     
        refund your money*.<br>

        <strong>Important Tips and Recommendations:</strong> 

        <ul>
        <li>Use only 1-2 tablespoons of liquid HE detergent</li>
        <li>Never use powdered soap</li> 
        </ul><br>

        Please note that shipping charges are non-refundable 
        if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
        Returns must be sent within 60 days of the original order date.</strong> </p></div>

Answer 1

您在p元素上指定了内联样式。 ul元素将隐含地结束此p元素，因此p元素中的样式将不适用于ul，其子元素或任何内容紧随其后。

如果您希望将样式应用于div元素中的所有文字，请在div元素上指定它。您应该最好在样式表中执行此操作：

div.Content {
    font-family: Verdana;
    font-size: 14px;
    color: #2137C2;
}

您应该在p之后的第二个文本块周围创建另一个ul元素，因为ul正在关闭第一个p。

Answer 2

您已为<p>段落标记指定了样式，而不是整个div。

这应该有效：

<div class="Content" style="font-family:verdana;color:#2137C2;font-size:14px;"><p>
        Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
        return it to us in the original packaging and, once we receive it, we will gladly     
        refund your money*.<br>

        <strong>Important Tips and Recommendations:</strong> 

        <ul>
        <li>Use only 1-2 tablespoons of liquid HE detergent</li>
        <li>Never use powdered soap</li> 
        </ul><br>

        Please note that shipping charges are non-refundable 
        if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
        Returns must be sent within 60 days of the original order date.</strong></p></div>

您还可以通过在CSS样式表中添加样式来将样式应用于Content类：

.content {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

Answer 3

为了更好的练习，请不要使用内联样式。

当您将p元素上的样式设置为内联时，只有该特定元素才会获得所提及的样式，而其他元素则不会。

这是一个fiddle，展示了如何使用单独的CSS。

Answer 4

这是因为浏览器假设您要在列表前关闭段落，并且不允许将列表元素作为段落的子句，因为段落仅用于包含短语内容（如span等内嵌标记）和文字）。要了解有关详情，请查看paragraph definitions或this StackOverflow post。

为了解决您的问题，我建议在列表之前结束您的段落，并在列表后面开始一个具有相同样式的新段落，如下所示：

<div class="Content"><p style="font-family:verdana;color:#2137C2;font-size:14px;">
    Try the kit for at least 30 days and if you aren’t completely satisfied, you can 
    return it to us in the original packaging and, once we receive it, we will gladly     
    refund your money*.<br>

    <strong>Important Tips and Recommendations:</strong> </p>

    <ul>
    <li>Use only 1-2 tablespoons of liquid HE detergent</li>
    <li>Never use powdered soap</li> 
    </ul><br>

    <p style="font-family:verdana;color:#2137C2;font-size:14px;">Please note that shipping charges are non-refundable 
    if you elected to have your kit sent to you by Priority or Express shipping.<strong>   
    Returns must be sent within 60 days of the original order date.</strong> </p></div>

此处示范：http://jsfiddle.net/FpvYM/

为避免重写段落的样式，您总是可以为它创建一个类：

<p class="fancy">text here</p>

使用CSS：

.fancy {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

或者，甚至：

.Content p {
    font-family:verdana;
    color:#2137C2;
    font-size:14px;
}

请注意，最后一个示例将影响具有“Content”类的所有段落div。

列表丢失后的css属性

4 个答案: