CSS之hover的使用+~

Posted 2022-08-24 web半晨

文章目录

• 1、作用于自身
• 2、作用于子元素
• 3、作用于兄弟元素

---

1、作用于自身

.oneself:hover 
	color: #0000ff;

---

<div class='oneself'>作用于自身</div>

---

2、作用于子元素

.child_element_box:hover>.child_element 
	color: #0000ff;

---

<div class="child_element_box">
	<div class="child_element">作用于子元素</div>
</div>

---

3、作用于兄弟元素

选择下一个紧挨的兄弟元素

.be_next_to_closely:hover+div 
	color: #0000ff;

---

<div>
	<div class="be_next_to_closely">选择紧挨的兄弟元素</div>
	<div>紧挨着的元素</div>
	<div>不是紧挨着的元素</div>
</div>

---

选择后边所有符合条件的兄弟元素

.all_element:hover~.elements 
	color: #0000ff;

---

<div>
	<div class="all_element">选择后边所有符合条件的兄弟元素</div>
	<div class="elements">符合的元素1</div>
	<div>不符合的元素1</div>
	<div class="elements">符合的元素2</div>
</div>