如何使用CSS选择器修改兄弟的属性：focus？ [英] How do I modify properties of siblings with CSS selecters like :focus?

问题描述

我在我的网站上遇到了一些代码问题， http://ethoma.com/wp/ 。在左侧的搜索栏中，我希望通常为深灰色的点击搜索，当搜索字段（其兄弟）：焦点被触发时，将变成浅灰色。这里是我现在的代码：

pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ min $ min $ 98％;
背景颜色：＃2a2a2a;
颜色：＃d3d3d3;
border：2px solid＃000000;
font-size：.85 em;
身高：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;

$ / code>

I am having trouble with some code on my site, http://ethoma.com/wp/. In the search bar, on the left side, I want the usually dark gray "hit enter to search" to turn a light gray when the search field (its sibling) :focus is triggered. Here is the code I currently have:

好的，#s是搜索字段，#searchsub是我的div想要打开#cccccc（浅灰色）。最后一组大括号似乎是我有问题的地方（不是大括号本身，而是上面的选择器）。正如我所说#s是#searchsub的兄弟，反之亦然。感谢您的任何答案！

#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; }

推荐答案

正如stefmikhail所说，你的选择器的空间意味着 #searchsub 是里面 #s 。就HTML而言，这显然是错误的，因为 input 字段是空元素，你不能在其中有其他元素。

Like stefmikhail said, the space in your selector means #searchsub is inside #s. As far as HTML is concerned, though, that is obviously wrong because input fields are empty elements and you can't have other elements inside them.

由于 #searchsub 是相邻的兄弟选择符 + 兄弟姐妹 #s ：

You want to use the adjacent sibling selector + instead, since #searchsub is the sibling that comes after #s:

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

这篇关于如何使用CSS选择器修改兄弟的属性：focus？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！