如何使用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？

回答

相关问题