我正在尝试完成“CSS:缺失的手册”第 2 版第 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”是本书勘误表中建议的解决方法。奇怪的是它仍然不起作用!
这是整个页面的代码:
<!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
最佳答案
!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 .
关于css - 为什么 "!important"不会覆盖 ":first-line"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2255161/