CSS元素僞不覆蓋子元素樣式

所以我想要樣式錨元素包含其他html元素。該基地的代碼是：
HTML：CSS元素僞不覆蓋子元素樣式

<div class="container" id="sub-menu"> 
    <div class="row" data-bind="foreach: subMenu"> 
     <a href="#"> 
     <div class="col-md-3 col-sm-6"> 
      <h3><span>title</span></h3> 
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</div> 
     </div> 
     </a> 
    </div> 
    </div>

自舉類不打擾你:)
，這裏是（從少產生）的CSS：

#sub-menu { 
    margin-top: 10px; 
} 
#sub-menu a span { 
    color: black; 
} 
#sub-menu a div { 
    color: #6b6b6b; 
} 
#sub-menu a:hover { 
    color: red !important; 
    text-decoration: none; 
}

的目標是當用戶將鼠標懸停在錨點上，文本顏色應該是紅色。有了這個解決方案，紅色不會被應用，但文字修飾效果很好。這裏是一個fiddle edition
如果我把顏色設置在一個水平上而不是很好（fiddle）或者根本沒有設置顏色（fiddle），但我需要爲標題和正文部分設置不同的顏色。
我也嘗試設置每個元素的懸停僞（fiddle demo），但它的所有裝飾都很難看，但顏色只適用於將鼠標懸停在確切元素上的情況。我想實現第二個版本，但是像第一個版本一樣使用自定義顏色。
感謝您的幫助。

編輯：我忘了解釋一個圖標也是在h3標籤，所以這就是爲什麼標題在span標籤。

來源

2014-02-14 Péter

你想包含在''所有元素將被應用的顏色？ – anurupr

是的。這將是目標 –

然後我的答案應該工作 – anurupr

如果你想所有顏色中所含的錨元素中的元素這應該工作

#sub-menu a:hover *{ 
    color: red; 
}

來源

2014-02-14 09:51:03 anurupr

很酷。我收到了關於通用選擇器和特殊性的警告。 :)有趣的是，文字裝飾不起作用。任何想法爲什麼是這樣？我調整了一下你的解決方案，這裏是我的最終解決方案：http://jsfiddle.net/uz5M6/ –

你的'文本裝飾'CSS應該留下來。這只是爲了確保所有的文本都獲得顏色'紅色' – anurupr

但是正如你可以看到它不工作，如果我不改變：http://jsfiddle.net/2dcQS/或者我誤解你。 –

CSS元素僞不覆蓋子元素樣式

回答

相關問題