CSS选择search类下首尾div设置样式不生效的问题排查

你HTML结构中的外层容器使用的是id="search"，而你编写的CSS中.search是类选择器，仅能匹配带有class="search"属性的元素，要匹配id属性的元素需要使用#开头的ID选择器，这是样式不生效的根本原因。

你可以选择任意一种方式修复：

方案1：修改CSS选择器（推荐，不用改动HTML结构） #

如果需要精准匹配form下直接子div的首尾元素，使用以下代码：

#search form > div:first-child,
#search form > div:last-child {
    font-size: large;
    color: red;
}

如果需要匹配#search下所有层级的第一个和最后一个div子元素，使用以下代码：

#search div:first-child,
#search div:last-child {
    font-size: large;
    color: red;
}

方案2：修改HTML属性 #

如果要保留原来的CSS代码，把HTML外层容器的id属性改为class属性即可：

<div class="search">
    <form method="GET" action="http://images.google.com/images">
        <div>Search</div>
        <div><input type="text" name="q" class="searchInput"></div>
        <div>
            <input type="submit" value="Search Image" class="searchButton">
        </div>
        <div> Try it </div>
    </form>
</div>

内容的提问来源于stack exchange，提问作者user16971617