Question

我有一个css-problem我真的似乎不明白:)我已经设计了css三年了，但我从来没有遇到过这个问题。

我已经在我的css文件中声明了一些应该适用于我的页面内容的样式。这通常是正确的css，但也有一些例外，例如page_child_title。我的印象是，如果我在我的css中为特定类声明了一个样式，这些将覆盖早期的css声明。现在好了，在这种情况下，事实并非如此。当我用firebug检查时，似乎我的浏览器确实想要使用“.page a”的font-size-css而不是使用“.page_child_title”（而且我不同意我的浏览器）。但是，“。page_child_title”的颜色正确应用。下面你可以找到我正在谈论的Html和CSS。

HTML

<div id="page" class="page Jobs">
    <div class="page_child">
        <a class="page_child_title" ...

的style.css

.page p, .page ul, .page a {
    font-size: 10px;
    text-align: justify;
}
style.css (line 208)


.page_child_title {
    color: #006633;
    font-size: 12px;
}
style.css (line 262)

我已经尝试将“.page_child_title”替换为“.Jobs a”，但这不起作用。然后我尝试在“.page a”之前声明“.page_child_title”，结果相同，所以现在我有点卡住了。有谁知道导致这个问题的原因是什么？

Answer 1

.page a是一个更具体的选择器。因此将使用其设置。

这种现象称为 css特异性：

http://css-tricks.com/855-specifics-on-css-specificity/

a.page_child_title { ... }可行。

Answer 2

有两种解决方案，

http://jsfiddle.net/ErsS4/

更改page_child_title to

a.page_child_title

或

http://jsfiddle.net/m5V8f/

这个方法是对元素的直接判断。

希望这有帮助！

Answer 3

在我看来，按类型而不是类名选择元素会更具体。

尝试将.page_child_title更改为a.page_child_title

Example

Answer 4

一个简单的解决方法应该是将你的风格改为

a.page_child_title

我认为它与css的层次结构有关，并且声明了a本身的风格。

Css-problem：font-size

4 个答案: