更改搜索栏的背景/文本颜色

Question

我的导航栏中有一个搜索栏（使用Bootstrap）：

<li>
    <form class="navbar-search pull-right">
        <input type="text" class="search-query offset1" placeholder="Search">
    </form>
</li>

我想更改默认的背景颜色和文字颜色，所以我实现了以下CSS：

input .search-query {
    background-color:#f47443;
    color:white;
}

然而颜色保持不变 - 黑色和白色。关于表格/输入背景颜色和字体颜色有什么特别之处吗？

Answer 1

你想：

input.search-query {
    /* css */
}

JS Fiddle demo

如果没有空格，则会选择input个search-query类的元素; 分隔术语input和.search-query的空格，浏览器在input元素内查找后代元素{ {1}}上课。

顺便提一下，你写的选择器：

search-query

永远不会匹配任何元素，因为input .search-query { /* css */ } （和input元素一样）void元素，因为它们不能包含后代元素甚至文本。

参考文献：

• CSS Selectors (Level 3), W3.org。

Answer 2

input .search-query {
    background-color:#f47443;
    color:white;
}

＆GT;

input.search-query {
    background-color:#f47443;
    color:white;
}

删除空格。