选择器

在 CSS 中,选择器是选取需设置样式的元素的模式。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover#语法

CSS 选择器
选择器示例说明
.class.name类选择器,选择 class="name" 的所有元素。
.class.class.name1.name2类选择器,选择 class="name1" && "name2" 的所有元素。
.class .class.name1 .name2类选择器,选择 class="name1" 元素后代中 class="name2"的元素。
element > elementdiv > p指定父元素选择器,选择父元素是 div 的所有 p 元素。

:hover

使用 :hover 伪类可以创建复杂的层叠机制。一个常见用途,比如,创建一个纯 CSS 的下拉按钮(不使用 JavaScript)。

下拉按钮

效果

原理

代码

.html

						
<div class="menu-bar">
  <ul>
    <li>首页</li>
  </ul>
</div>
						
					

.css

						
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}