一些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="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;
   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;
}
 
 
原文地址:https://www.cnblogs.com/tenWood/p/6486280.html