Question

以下是两个几乎相同的XHTML文档，CSS略有不同。根据我的理解，分组选择器只是为了方便起见，不应该对它们的应用产生影响，但这两个文档会产生不同的效果图？我困惑了吗？

首先将选择器分组

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
    content="text/html;charset=utf-8" />

<style type="text/css">
    #container {
        background-color : #000000;
        color : #000000;
    }
    a, a:link, a:visited, a:hover, a:active {
        color : #000000;
    }
    .link {
        color : #FFFFFF;
    }
</style>
</head>

<body>

<div id="container">
<a href="#" class="link">Testing</a><br /><a href="#" class="link">Testing</a>
</div>

</body>
</html>

- - - - =====对战===== -----
单独的选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
    content="text/html;charset=utf-8" />

<style type="text/css">
    #container {
        background-color : #000000;
        color : #000000;
    }
    a {
        color : #000000;
    }
    a:visited {
        color : #000000;
    }
    a:hover {
        color : #000000;
    }
    a:active {
        color : #000000;
    }
    .link {
        color : #FFFFFF;
    }
</style>
</head>

<body>

<div id="container">
<a href="#" class="link">Testing</a><br /><a href="#" class="link">Testing</a>
</div>

</body>

</html>

Answer 1

你遇到了一个选择器重量问题 - 在你的第一个例子中，你有

a:link, a:hover {
  color: black;
}
a {
  color: red;
}

这会使<a>始终为黑色，因为a:link IS a - 但它与css的权重更高 - 就像.someClass a一样会排名a。

在第二个示例中，您没有超重a，因此低于a:hover规则会覆盖它。

这是一篇关于理解这个概念的文章：http://css-tricks.com/855-specifics-on-css-specificity/

Answer 2

你并不误解CSS，你提出的两个例子实际上是相同的。

Answer 3

这就是我看到的不同之处：

http://jsfiddle.net/sCKHP/2/

在第一个示例中，.link优先于a:link

在第二个示例中，a:link优先于.link

分组CSS规则的处理方式与为每个选择器指定单独的规则不同吗？

3 个答案: