如何使用CSS選擇器修改兄弟的屬性：focus？

我在我的網站上遇到了一些代碼問題，http://ethoma.com/wp/。在左側的搜索欄中，當搜索字段（其兄弟）：焦點被觸發時，我需要通常爲深灰色的「點擊搜索」來變淺灰色。這是我目前擁有的代碼：如何使用CSS選擇器修改兄弟的屬性：focus？

#s 
{ 
    min-width:98%; 
    background-color:#2a2a2a; 
    color:#d3d3d3; 
    border:2px solid #000000; 
    font-size:.85 em; 
    height:1.9em; 
    display:inline !important; 
    border-radius:5px 5px 5px 5px; 
} 

#s:focus 
{ 
    border:2px solid #2a2a2a; 
} 

#searchsub 
{ 
    color:#2a2a2a; 
    text-align:right; 
    font-size:.65em; 
    font-weight:lighter; 
} 

#s:focus #searchsub 
{ 
    color:#cccccc; 
}

好吧，#S是搜索領域，#searchsub是，我想轉#CCCCCC（淺灰色）的股利。最後一組大括號似乎是我遇到問題的地方（不是大括號本身，而是上面的選擇符）。正如我所說#s是#searchsub的兄弟，反之亦然。感謝任何答案！

來源

2011-08-28 Eric Thoma

你有沒有想過使用jQuery做到這一點？ – stefmikhail

您應該粘貼主題中的相關標記以節省我們爲了搜索相關標記而必須遵循鏈接的努力。 – BoltClock

就像stefmikhail說的那樣，選擇器的空間意味着#searchsub是裏面的#s。就HTML而言，雖然這顯然是錯誤的，因爲input字段是空元素，並且您不能在其中包含其他元素。

您要使用的相鄰兄弟選擇+代替，因爲#searchsub是#s後到來的兄弟姐妹：

#s:focus + #searchsub 
{ 
    color:#cccccc; 
}

來源

2011-08-29 04:04:17 BoltClock

但應該提到的是，相鄰的選擇器是CSS3的一部分，儘管我不希望這種情況發生，但CSS3尚未得到完全支持。如果您希望Internet Explorer 7及更低版本的用戶擁有此功能，則可能會出現問題（對於IE7）或者不存在（對於IE6及更低版本）。我希望我們不必爲這樣的瀏覽器編寫代碼，但我的理念是，當它涉及懸停狀態時，使用適用於所有瀏覽器的內容，而不僅僅是大多數內容。但是，嘿，這是你的電話。我認爲CSS3選擇器很酷！ – stefmikhail

@stefmikhail：你錯誤地將CSS2鄰居兄弟選擇器'+'誤認爲CSS3一般兄弟選擇器'〜'。兩者在IE7 +中都得到很好的支持。 – BoltClock

哎呀，你是完全正確的。感謝您的更正。 – stefmikhail

與您的代碼的問題是，在#s:focus #searchsub將#searchsub#s:focus後，你告訴CSS於ID #searchsub行動中的ID #s。

我同意JamWaffles，你可以用JavaScript做到這一點。我會用jQuery來做，如果你願意，我可以發佈。

來源

2011-08-28 23:47:06 stefmikhail

-1。僅憑CSS即可完成。不需要JavaScript。 –

@Rikudo Sennin我從來沒有說過它不能用CSS來實現，我只是說我會選擇使用javascript，因爲使用CSS這一點在舊版IE瀏覽器中不起作用。 – stefmikhail

單獨使用css可以實現某些功能。通常最好這樣做。如果絕對需要的話，我會去的頂端，我會使用Modernizr來檢查是否可能並使用JavaScript其他。 –

如何使用CSS選擇器修改兄弟的屬性：focus？

回答

相關問題