2

我用这个简单的方法打破了我的头？问题。我知道它不是错误也不是跨浏览器问题，在 Firefox 和 Internet Explorer 上进行了测试。只是我不明白为什么它会以这种方式解决。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
    .red_class { color: red; }
    .blue_class {color: blue;}
</style>
</head>

<body>

<div class="red_class">
  <a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>

在我看来，这两个规则具有相同的特异性，所以我希望链接显示为蓝色，因为 blue_class 规则更接近，但链接显示为红色。我实际上更改了顺序，以便首先编写“.blue_class”规则，但它并没有改变结果

我找到了一些使代码工作的方法，例如使第二条规则更具体，例如：

.red_class a.blue_class {color: blue;}

但我真的很想了解为什么这不能按我的预期工作，也就是说，如果链接有一个 blue_class 类，它应该显示为蓝色。

非常感谢您的帮助。提前致谢。

4

3 回答 3

0

实际上，我看不到您如何获得红色链接...

带有定义的锚元素href不继承类似coloror的属性text-decoration，所以你得到的结果有点奇怪。

http://www.w3.org/TR/html401/struct/links.html#h-12.2

用户代理通常以使用户明显的方式呈现链接（下划线、反向视频等）。确切的渲染取决于用户代理。渲染可能会根据用户是否已经访问过链接而有所不同。

因此，这会产生一个默认样式的锚：

.red_class{color:red;}

<div class="red_class">
    <a href="#">Something</a>
</div>

在这种情况下，锚继承了红色：

.red_class{color:red;}

<div class="red_class">
    <a>Something</a>
</div>

我真的不明白这个问题，但至少这是对锚样式如何工作的解释。

于 2012-12-09T02:22:03.793 回答
0

@Luxfer 这只是我做的一件简单的事情。为您的Firefox下载Firebug 插件。检查要赋予样式的元素。在Firebug的右侧，有一个框，您可以在其中看到使用的 CSS。只需右键单击CSS 窗格，您将在其中找到一个选项Add Rule。当您单击它时，它将采用将完美定位所需元素的选择器。

于 2013-04-10T11:20:42.747 回答
0

你确定它不起作用吗？蓝色不是一个很好的测试颜色，因为大多数浏览器默认为蓝色作为 hrefs。

<div class="red_class">
  <a class="green_class" href="http://somesite.com">Somesite</a>
    <p>More Text</p>
</div>

和

.red_class { color: red; }
.green_class {color: green;}

似乎在这里的 Chrome 中工作正常。
----演示-----

于 2013-04-10T11:28:06.847 回答