1

在我的 html 页面中，我有带有 id 页脚的 div。里面是其他几个div，最后一个里面有p-tag。如何为该 p 应用 css 样式？

#footer div p {
    background-color: #000;
}

#footer div {
    float: left;
    width: 23%;
    border-left: solid 1px;
    margin: 0;
    padding-left: 5px;
}

第一个似乎没有覆盖第二个，效果很好。有人可以给我提示在哪里可以找到特别是关于 CSS 选择器顺序的信息吗？

4

2 回答 2

1

您可以使用:last-child选择器来定位最后一个 div 及其包含的<p>标签。

footer div:last-child p{color:#f00;}

这是一个示例小提琴 - http://jsfiddle.net/vuGpt/

这是一些进一步的阅读 - http://www.w3schools.com/cssref/css_selectors.asp

CSS 选择器没有真正的顺序，除了您创建的顺序。如果您稍后在 css 中选择相同的元素，您定义的样式将被覆盖。你只需要知道你是如何选择你的元素的。通用选择器将被更具体的选择器覆盖。例如，如果您定义了以下内容

p{color:#0f0;}

然后这个选择器将被上面定义的更直接的选择器覆盖。为了克服这个问题，您可以添加!important到您的规则中。这样，您可以合理地确定无论以后是否覆盖该样式，都会应用该样式。除非你不小心!important再次使用。它很快就会变得一团糟，并且使用编写良好的 CSS 你应该能够完全避免使用!important......

您为上述结果生成的 CSS 将变为：

footer div:last-child p{color:#f00 !important;}

希望这可以帮助...

于 2013-07-11T07:54:35.957 回答
0

你的 CSS 很好。我建议检查您的 HTML 的结构。从您提供的 CSS 中，HTML 应如下所示：

    <div id="footer">
        <div></div>     
        <div>
            <p>My paragraph</p>
        </div>
    </div>

我已经对此进行了测试，一切都显得犹太洁食。见小提琴。

于 2013-07-11T08:04:10.403 回答