嵌套類的CSS選擇器

我用這個簡單的方法打破了我的頭腦？問題。我知道它不是一個錯誤，也不是一個跨瀏覽器的問題，在Firefox和Internet Explorer上測試。只是我不明白爲什麼要這樣解決。嵌套類的CSS選擇器

<!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應該以藍色顯示。

真的很感謝幫助。提前致謝。

來源

2012-12-08 Luxfer

Chrome中也沒有。 http://jsfiddle.net/9AZvK/ – greg5green

也許一個更具體的選擇器的默認瀏覽器樣式表？如果您查看完整樣式樹（例如在Chrome工具或Firebug中），會發生什麼情況？ –

您使用哪個瀏覽器？ – Russ

其實我不知道你是如何得到一個紅色的鏈接...

錨元素與定義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>

我真的不明白的問題，但至少這是解釋錨定樣式的工作原理。

來源

2012-12-09 02:22:03 rdiazv

@Luxfer這只是我做的一件簡單的事情。下載Firebug插件爲您的Firefox。檢查元素要給你的風格。在右側的Firebug，有一個盒子，你可以看到使用的CSS。只需在CSS窗格上點擊右鍵，在那裏您會找到一個選項添加規則。就像你那就點擊，它將會選擇完美的目標所需的元素。

來源

2013-04-10 11:20:42 V15HM4Y

你確定它不工作嗎？藍色並不是一個很好的顏色，因爲大多數瀏覽器默認爲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-----

來源

2013-04-10 11:28:06 Scott

嵌套類的CSS選擇器

回答

相關問題