Question

我正在尝试在第二版“CSS：The Missing Manual”的第6章中进行教程，我遇到了一个我想要了解的问题。

我有一种样式：

#main p:first-line {
    color: #999999;
    font-weight: bold;
}

后来我有另一种样式：

#main p.byline {
    color: #00994D !important;
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
}

我很困惑，因为第二个不会覆盖第一个颜色选择，尽管第二个颜色选择中有“！important”。我把这两个课程都放到了一个在线特异性计算器中，第二个课程更具体，所以我更加困惑。

顺便说一句，包含“！important”是本书勘误表中提出的解决方法。奇怪，它仍然无效！

以下是整个页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Typography</title>
<style type="text/css">
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
    padding: 0;
     margin: 0;
     font-size: 100%;
     font-weight: normal;
    }
    table { border-collapse: collapse; border-spacing: 0; }
    td, th, caption { font-weight: normal; text-align: left; }
    img, fieldset { border: 0; }
    ol { padding-left: 1.4em; list-style: decimal; }
    ul { padding-left: 1.4em; list-style:square; }
    q:before, q:after { content:''; }

body {
    color: #002D4B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%
}

#main h1 {
    color: #F60;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 4em;
}
#main h2 {
    font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
    border-bottom: 1px solid #002D4B;
    margin-top: 25px;
}
#main h3 {
    color: #F60;
    font-size: 1.9em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 25px;
    margin-bottom: 10px;
}
#main p {
    font-size: 1.5em;
    line-height: 150%;
    margin-left: 150px;
    margin-right: 50px;
    margin-bottom: 10px;
}
#main p:first-line {
    color: #999999;
    font-weight: bold;
}
#main ul {
    margin: 50px 0 25px 50px;
    width: 150px;
    float: right;
}
#main li {
    color: #207EBF;
    font-size: 1.5em;
    margin-bottom: 7px;
}
#main p.byline {
    color: #00994D !important;
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
}

#main .byline strong { color: #207EBF; text-transform: uppercase; margin-left: 5px;
}

</style>
</head>

<body>
<div id="main">
<h1><strong>CSS</strong> The Missing Manual</h1>
<h2>Exploring Typographic Possibilities</h2>
<p class="byline">november 30 <strong>Rod Dibble</strong></p>
<ul>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
</ul>
<h3>Esse quam nulla</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h3>Quis autem vel eum</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</body>
</html>

以上是JSBin上的代码：http://jsbin.com/unexe3

Answer 1

我实际上尝试过你的代码，它适用于我（有正确的绿色） - 使用Firefox。您使用的浏览器是什么？

Answer 2

！important属性正在应用于.byline，但段落中没有足够的内容来实现它（它没有应用于第一行）。 #main p:first-line选择器比#main p.byline更具体到元素的第一行。您可以通过将第一行选择器更改为仅应用于跟随h3元素的段落元素来轻松修复它。

#main h3+p:first-line
{
    color: #999999;
    font-weight: bold;
}

此外，特异性计算器可能不完全准确，因为:first-line不是真实元素，而是伪元素。 Smashing Magazine has a nice article on Advanced CSS Selectors

Answer 3

未应用颜色的原因是因为:first-line在段落的第一行周围创建了一个“伪元素”。所以，虽然代码看起来像这样：

<p class="byline">
  november 30 <strong>Rod Dibble</strong>
</p>

浏览器最终解释如下：

<p class="byline">
  <p:first-line>
    november 30 <strong>Rod Dibble</strong>
  </p:first-line>
</p>

即使您已将color属性声明为重要，但它在（#main p.byline）下声明的CSS选择器并不特定于第一行伪元素，因为声明的属性与#main p:first-line选择器。

W3文档详细介绍：The :first-line pseudo-selector

为什么“！important”不会覆盖“：first-line”？

3 个答案: