如何使用:focus这样的CSS选择器修改兄弟姐妹的属性? [英] How do I modify properties of siblings with CSS selectors like :focus?

问题描述

我在我的网站 http://ethoma.com/wp/.在搜索栏的左侧，当触发搜索字段(其同级):focus时，我希望通常为深灰色的按Enter键进行搜索"将其变为浅灰色.这是我目前拥有的代码:

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
{
    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(浅灰色)的div.最后一组花括号似乎是我遇到问题的地方(不是花括号本身，而是上方的选择器).正如我所说的，#s是#searchsub的兄弟姐妹，反之亦然.

Okay, #s is the search field and #searchsub is the div that I want to turn #cccccc (light gray). The last set of curly braces seems to be where I am having the problem (not the braces themselves, but the selector above it). As I said #s is a sibling of #searchsub and vice versa.

推荐答案

就像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;
}

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