.detail_list_icon { border-bottom: 1px solid lightgrey; height:48px; width:220px; } .detail_list_icon:hover{ background: #F0F0F0;}
------------------------------------------------------------------------------------------------
<!--num 1-->
<div class="_initiate_outline_icon" >
<div class="_initiate_outline_num">
<a >1</a>
</div>
<div class="_initiate_outline_character">背景</div>
</div>
<!--num 2-->
<div class="_initiate_outline_icon">
<div class="_initiate_outline_num">
<a>2</a>
</div>
<div class="_initiate_outline_character">分布式存储系统HDFS</div>
</div>
<!--num 3-->
<div class="_initiate_outline_icon">
<div class="_initiate_outline_num">
<a>3</a>
</div>
<div class="_initiate_outline_character">MapReduce计算框架</div>
</div>
._initiate_outline_icon {
position: relative;
margin-left: auto;
margin-right: auto;
float:right;
height:73px;
/*left: 10px;*/
top: 20px;
padding-top: 22px;
font-size:18px;
width:100%;
color: #FFFFFF;
}
._initiate_outline_icon a {
color:white ;
}
._initiate_outline_icon:hover{
background: white;
color: #3D9DC5;
}下面为什么这么写，要在._initiate_outline_icon:hover后再
写一个._initiate_outline_num？？？？？？？？？？
._initiate_outline_icon:hover ._initiate_outline_num{
background: #3D9DC5;
}
._initiate_outline_icon:hover ._initiate_outline_num a {
color: #FFFFFF!important;
}
两个伪元素的配合使用
html
::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after。
伪元素
css
selector:pseudo-element {property:value;}
selector:pseudo-element {property:value;}property 是指伪元素的属性。此外，css
selector.class:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;} 伪元素就是这样通过赋值给自己属性从而给指定的选择器添加上样式的效果。
:before
:before
.before:before{content:'you before'; color:red;}
<div class="before"> me</div>:before 添加了属性 content，并赋值为 you before。我们来看效果：
//在指定元素的内容 me 前添加了新内容 you before:before 添加的新内容区域默认的 display 属性值为 inline，那么我们可不可以修改新内容区域的属性，答案是肯定的。你可以像修改其他元素一样修改它的样式，我们来将它的 display 属性值来改为block。
.before:before{content:'you before'; display:block; color:red;}
<div class="before"> me</div> 现在我们再来看下效果：
//由伪元素 :before
content 属性
:before 和 :after 而言，属性 content 是否为必选项呢？我们尝试把 content
.before:before{display:block; color:red;}
<div class="before"> me</div>
//没有了 content 属性，新内容自然是为空的
//同时我们查看 html 源码会发现，:before
那么我们设为空呢？
.before:before{content:''; display:block; color:red;}
<div class="before"> me</div>
//新内容依然为空
//此时 :before:before 和 :after 而言，属性 content 是必须设置的，那么在上面的例子，我们知道属性的值可以为字符串，那么还可以为其他形式吗？答案是可以的，它还可以是指向一张图片的 URL:
content: url( "img/icon.png" )
配合伪类使用
:before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover
.before:hover:before{content:'you before'; color:red;}
<div class="before"> me</div>
//无内容
//鼠标移至 div.before:before:hover
配合取值函数 attr() 使用
attr()
a::before{content: attr(title)}
<a href= title="专业面向开发者的中文技术问答社区"></a>
此时达到的效果相当于：
全选 复制
放进笔记
<a href=>专业面向开发者的中文技术问答社区</a>
:after
:after 与 伪元素 :before 类型相同，只不过它指定的属性 content
.after:after{content:'after you'; color:#F00;}
<div class="after">I </div>
//伪元素 :after:after 其他特征与 :before
