网页布局------点击获取焦点focus使相邻元素和不相邻元素发生变化

1、相邻元素使用"+"

实现效果：input边框和按钮放在同一个div下，使用hover可以设置悬浮在input边框时的颜色变化，而需要设置按钮边框的颜色变化则需要使用"+"来添加

 页面结构

 

  <div class="nav-search">
                    <input type="search" placeholder="小米11" class="nav-search-input" />
                    <button type="button" class="iconfont">&#xe63d;</button>
                    <div class="nav-search-box">
                        <ul>
                            <li>手机更新</li>
                            <li>空调</li>
                            <li>冰箱</li>
                            <li>洗衣机</li>
                            <li>电视</li>
                            <li>摩托车</li>
                        </ul>
                    </div>
    </div>

 

页面样式

.nav-search >input:hover,.nav-search >input:hover+button{
    border-color: #b0b0b0;
}

 2、不相邻元素使用"~"

实现效果：点击input框使显示下面div中包含的商品分类

页面结构

  <div class="nav-search">
                    <input type="search" placeholder="小米11" class="nav-search-input" />
                    <button type="button" class="iconfont">&#xe63d;</button>
                    <div class="nav-search-box">
                        <ul>
                            <li>手机更新</li>
                            <li>空调</li>
                            <li>冰箱</li>
                            <li>洗衣机</li>
                            <li>电视</li>
                            <li>摩托车</li>
                        </ul>
                    </div>
                </div>

页面样式

.nav-search >input:focus~.nav-search-box {
    display: block;
}

 

 

<div class="nav-search-box">

                        <ul>

                            <li>手机更新</li>

                            <li>空调</li>

                            <li>冰箱</li>

                            <li>洗衣机</li>

                            <li>电视</li>

                            <li>摩托车</li>

                        </ul>

                    </div>