0

我想我会很聪明，从这里的 jsfiddle 中删除我的“作者”类：http: //jsfiddle.net/clayshannon/cMYEH/3/并将其替换为 CSS 中的“引用”，着眼于减小大小的 HTML。

唯一应用了“作者”类的元素是“引用”元素。所以它应该完全一样，对吧？但是当我从这里更改 CSS 时：

.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

...对此：

cite {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

...名称不再显示 - 就好像它被“涂成黑色”。为什么不应用颜色（白色）？

更新

该死的！我又搞砸了......实际上，我写错了：它是/是“引用”元素内部的“标题”类，而不是作者 - 因此造成了所有这些混乱！...... http://jsfiddle.net/克莱香农/cMYEH/5/

4

2 回答 2

3

您的<cite>元素有一个title具有关联样式的类，该类将覆盖它，因为类选择器比元素选择器更具体。

这是关于该主题的一个很好的资源：http: //css-tricks.com/specifics-on-css-specificity/

更新

添加一些例子来澄清；

css

.title {
    color: blue;
}

/* will override .title because they have same specificity but is defined later */
.author { 
    color: red;
}

/* will not override any class selector even when defined last*/
cite {
    color: green;
}

html

<cite class="title">will be blue, not green</cite>
<cite class="title author">will be red, see comment in css</cite><br>

参见演示：http: //jsfiddle.net/K7r56/

于 2013-07-18T18:19:02.747 回答
2

您忘记将 cite css 块添加到小提琴中或忘记更改 .author 以引用

http://jsfiddle.net/cMYEH/4/

cite {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

如果这看起来不正确，请参考 xec 的答案

于 2013-07-18T18:33:44.017 回答