回答问题前先说一个问题,就是不要滥用 #
,在css
中代表了id
选择器,由于id
选择器的权重过高,同级下不能存在相同的id
(即使能通也不推荐相同id
),如果有需要多个相同的容器,希望可以选择 .
类选择器
先这个查找上一个兄弟元素的符号,在我印象里css
里是没有的。因为css
的写法顺序决定了结果,在#a
后写的内容就算加选择器,能选择的也就只能事#a
后方或者下方的元素了。
比较类似的符号 ~
, #a:hover ~ .c 指的是#a
后面所有的.c
没有直接的方案,可以通过伪类达到目标效果
p:first-of-type
:指定父元素的首个 p 元素的背景色
#a~#c:hover
:c元素上面必须有a。
<div class="start">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.start {
display: flex;
}
.start > div {
height: 30px;
width: 30px;
margin-right: 4px;
border: 1px solid #999;
cursor: pointer;
}
.start:hover > div {
border-color: #f50;
}
.start > div:hover,
.start > :hover ~ div {
border-color: #999;
}