0

在以下示例中，我有一个内联 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>
4

4 回答 4

2

您正在指定p元素的内联样式。该ul元素将隐式地p在它之前结束该元素，因此该p元素的样式将不适用于ul、其子元素或任何其后的东西。

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

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

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

于 2013-09-02T19:24:12.497 回答
0

您已为段落标签指定样式<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;
}
于 2013-09-02T19:25:55.233 回答
0

为了更好的实践，不要使用内联样式。

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

这是一个小提琴，展示了如何使用单独的 CSS 来做到这一点。

于 2013-09-02T19:28:28.020 回答
0

这是因为浏览器假设您想在列表之前关闭段落，并且不会让您将列表元素作为段落的子元素，因为段落仅用于包含短语内容（如内嵌标签，如 span 和 text ）。要了解更多信息，您可以查看段落定义或此 StackOverflow 帖子。

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

<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;
}

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

于 2013-09-02T19:30:02.447 回答