日度归档:2020年1月18日

CSS 伪类简介说明


摘要:
下文讲述css中伪类的相关说明,如下所示:


CSS 伪类功能说明:

CSS伪类的功能:
是为元素选择器添加特殊形态效果。
例:
一个链接标签,被选中、经过、点击后这些都是不同的形态,都是使用css伪类实现。

CSS伪类的实现

----css 伪类语法:
selector:pseudo-class{property:value;}
/*
css 伪类语法:
       选择器+冒号+状态
*/

例:

 a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */

CSS代码中选择器里面的波浪线的作用说明


摘要:
下文讲述在css中选择器组合时波浪线的作用说明,如下所示:


在两个选择器之间加入波浪线的功能:
为相邻元素指定样式

例:
对当前div 标签同级的span标签设置样式,如下所示:

    <html>
<head>
<style>

.div{
   border:1px solid black;
   width:200px;
   height:100px;
}

.div~span
{
   background-color:black;
   color:white;
   width:40px;
   height:40px; 
  margin:auto;
} 
 
</style>
</head>
<body>
<h2>div中的span样式演示</h2>

<div  >

<span >
  div中span不会被指定样式信息
</span>
   

</div>

<span >
 span 会被指定样式信息
</span>


</body>
</html>