css中input表单focus兄弟触发失效问题_组件css :focus 无效

由于input标签是单标签, 其中不能插入其他元素标签及类型, 因此,对于input中需要进行的focus触发, 只能对兄弟进行,
但在实际的操作中, 有时会出现focus触发失效的情况,
经过多次实验得出结果:
表单focus触发其他兄弟标签时, 其要触发的兄弟标签必须在其标签的下一位(必须在下一位相邻, 两个兄弟标签中间不能有其他标签存在, 方能成功执行)

例如:

css中

/*input:focus特性, 对于兄弟标签, 只能让相邻的兄弟做出回应(必须紧邻这下一个, 隔一个位都不行)*/
/*这里设置一个div.select-what用于包着以内三个属性, 以便于它们可以同时做出反应*/
.select-what {
	visibility: hidden;
}
1
2
3
4
5

html中

			<input type="select" placeholder="谁**买小米儿" id="only-one-input"/>
			<div class="select-what">
				<div class="select-input-up-left"></div>
				<div class="select-input-up-right"></div>
				<div class="select-input">
					<p>全部商品</p>
					<p>红米</p>
					<p>手机</p>
					<p>冰箱</p>
					<p>洗衣机</p>
					<p>电视</p>
				</div>
1
2
3
4
5
6
7
8
9
10
11
12