CSS选择器

发表评论

css是个很奇妙的东西。至于怎么奇妙，可以 参考文档

鼠标移动到目标 显示效果

<style>
/* 选择鼠标指针位于其上的链接 呈现效果 */
.shady:hover{
      color: white;
}
/* 原样式 */
.shady{
      color:black;
      /* 过渡效果1s */
      transition:1s;
}
</style>
<body>
<h1 class="shady">阿姨你行不行</h1>
</body>

阿姨你行不行

用多种CSS达到 悬浮提示框效果

/* 定位 搭配隐藏 */
.prompt_div{
position: relative;
height: 40px;
width: 120px;
background:green;
line-height:40px;
text-align:center;
}
/* 隐藏定位栏 */
.hide_div{
display: none;
color: black;
width: 220px;
height: 90px;
background:rgba(244, 244, 244);
position: absolute;
left:0px;
box-shadow:4px 4px 5px #ccc; 
}
/* 鼠标移动到 显示定位栏 */
.prompt_div:hover div{
display: block;
}

<div class="prompt_div">显示提示？<div class="hide_div">展示提示</div></div>
显示提示？

这是用到了position定位+display区域显示


CSS三种写法的优先级

html文件内部内容

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8"/>
 <title>css样式优先级</title>
<!-- 外部样式 -->
 <link href="index.css" rel="stylesheet" type="text/css"/>
<!-- 内页样式 -->
 <style type="text/css">
 .box{
 background:red;
 border:1px
 solid black;
 width:100px;
 height:100px;
 }
 </style>
 </head>
 <body>
<!-- 行内样式  -->
 <div style="background:yellow;width:100px;height:100px;" class="box">
 </div>
 </body>
 </html>

引用的css文件内容

.box{ width:100px; height:100px; background:blue; }

结果显示为 行内式的css效果：


所以，我们得知 CSS三种写的优先级是：行内样式＞内页样式＞外部样式

发表回复