Question

我有一条css规则，我无法覆盖：

body {
    font: 12px/1.45em Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.116;
    margin: 0px;
    padding: 0px;
    background: #cccccc url(/images/bg_grad.jpg) fixed;
    background: #71828A;
}
.popup_text {
    color: #FFFFFF;
    font: 12px/1.45em Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    margin: 5px;
}

<body class="popup_text">

我想用不同的popup_text覆盖font-size。这是我尝试过的：

.popup_text.big {
    font-size: 16px;
}

<body class="big">

和

.popup_text .big {
    font-size: 16px;
}

<body class="big">

和

<body class="popup_text.big">

当我这样做时，浏览器似乎完全忽略.popup_text规则并恢复为body的css定义。

覆盖.popup_text规则的最佳方法是什么，我只想增加font-size使用的.popup_text？

Answer 1

.popup_text.big匹配属于类popup_text成员的元素，也是类big的成员。

<body class="big">只匹配其中一半的条件。您需要<body class="big popup_text">

.popup_text .big匹配作为类big成员的元素，该元素具有作为类big成员的祖先。

您需要<html class="popup_text"> ... <body class="big">

<body class="popup_text.big">的班级名称中包含.。您需要在选择器中转义它（.popup_text\.big）。

Answer 2

CSS选择器.popup_text.big（类之间没有空格）将匹配同时具有popup_text和big CSS类的任何元素。

CSS选择器.popup_text .big（类之间的空格）将匹配具有类big的任何元素，该类是具有类popup_text的元素的后代。

但是，您提供的示例都没有包含这两个类的body元素。你最接近的是<body class="popup_text.big">，但是缺少了类之间的空间并且有一个无关的时期。要应用多个类，您需要编写<body class="popup_text big">或<body class="big popup_text">。

<强> jsFiddle example

您也可以将字体属性修改添加到您拥有的popup_text规则的末尾，因为浏览器将使用您指定的规则中的最后一个重复属性。

<强> jsFiddle example

覆盖以句点开头的CSS规则

2 个答案: