一些css杂项笔记

div[class*="col-"]{

　　background-color: gold;

　　border: 1px solid #ccc;

}

//给class开头等于col-的div添加样式；

<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">

　　<img src="data:images/perion.png" class="img-responsive">

</div>

//bootstrap的hidden-sm hidden-xs:在sm、xs的尺寸下隐藏；

.list-item{

　　height: 112px;

　　padding-left: 138px;

　　background: url(../images/icons.png) left top no-repeat;

　　margin-bottom: 39px;

　　overflow: hidden;

}

//这里用overflow:hidden来消除margin-top的塌陷？?

//有没有碰到过margin-top的塌陷问题？

//原理是怎么的？

 

.case-list .col-lg-3 .mask{

　　position: absolute;

　　left: 0;

　　top: 0;

　　width: 100%;

　　height: 100%;

　　background-color: #ccc;

　　color: #fff;

　　padding: 10px;

　　display: none;

}

.case-list .col-lg-3:hover .mask{

　　display: block;

}

//展示在图片上遮罩； 绝对定位，相对父级100%; 平时不显示;鼠标放在父级上显示这个遮罩；

 

<div class="container-fluid">

　　<div class="container">

　　</div>

</div>

//container被包在container-fluid里面；外面包裹宽度是100%;里面是固定宽度；

 

css相邻兄弟选择器：

可选择紧接在另一元素后的元素，且二者有相同的父元素；

如果需要选择紧接在另一个元素后的元素， 而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {

　　margin-top: 5px;

}