Question

我这么简单地打破了我的脑袋？问题。我知道它不是bug或跨浏览器问题，在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中，因为blue_class规则更接近，但链接以RED显示。我实际上改变了顺序，以便首先编写“.blue_class”规则，但它没有改变结果

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

.red_class a.blue_class {color: blue;}

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

真的很感激帮助。提前致谢。

Answer 1

其实我看不出你是如何得到一个红色的链接......

定义为href的锚点元素不会继承color或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>

我真的没有遇到问题，但至少这是对锚样式如何工作的解释。

Answer 2

@Luxfer这只是一件简单的事情。为 Firefox 下载 Firebug Addon 。检查要为其提供样式的元素。在 Firebug 的右侧，有一个框，您可以在其中看到使用的CSS 。只需在CSS窗格中右键单击，您就会在其中找到一个选项添加规则。当您单击时，将完美地定位所需元素的选择器。

Answer 3

你确定它不起作用吗？蓝色不是一个好的颜色，因为大多数浏览器默认为蓝色的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似乎运行正常。
----Demo-----

嵌套类的CSS选择器

3 个答案: