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

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 元素内部查找具有 search-query 类的 后代 元素。

顺便说一句，你写的选择器:

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

可能从不匹配任何元素，因为input(和img元素一样)空元素，因为它们不能包含后代元素甚至文本。

引用资料:

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