使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

html代码：

<div class="menu-bar">
<ul>
<li>
<h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3>
<ul>
<li>
html/css从入门到精通
</li>
<li>
html5新增API
</li>
</ul>
</li>
</ul>
</div>

对应的css代码：

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

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

移除a标签hover时的下划线

时间： 2025-01-05 19:19:15

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单的相关文章

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

Css3之高级-1 Css复杂选择器（兄弟选择器、属性选择器、伪类选择器、伪元素选择器）

一.兄弟选择器相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

CSS之固定定位，绝对定位+负边距，双飞翼布局，属性选择器，伪类选择器补，状态伪类选择器，相邻全部兄弟选择器，取非选择器，em与rem，变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要负边距双飞翼布局属性选择器伪类选择器补状态伪类选择器相邻全部兄弟选择器取非选择器 em与rem 变形效果固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr

css3新增选择器：伪类选择器和属性选择器

一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li>我是第五个</li>

css3属性选择器，兄弟选择器，伪类选择器

属性选择器 css3语法(类似于正则) 属性选择器:属性是相对于标签而言. 所谓属性选择器就是根据指定名称的属性的值来查找元素 /*1.E[attr]:查找指定的拥有attr属性的E标签.如查找拥有style属性的li标签*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签.如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/ li[class=re