css工作中常用布局

去掉input默认样式

 /*去掉点击后的聚焦边框*/
  outline: none;
  /*去掉默认的边框*/
  border: 0;

文字超出省略

.spn3{
  width: 102px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
  
}

修改input中placeholder的字体颜色

.mint {
  background-color: #F5F5F5;
  color: #CCCCCC;
  padding-left: 10px;
}

.mint::-webkit-input-placeholder { /* WebKit browsers */
  color: #CCCCCC;
  font-size: 10px;
}

.mint:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #CCCCCC;
  font-size: 10px;
}

.mint::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #CCCCCC;
  font-size: 10px;
}

.mint:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #CCCCCC;
  font-size: 10px;
}

css如何选择相同class下的第一个class元素和最后一个元素?

如图，如果像选择类名为 class=“exerciseInfo” 中的第一个和最后一个div，做法如下：

选择第一个类名： .exerciseInfo: nth-of-type(1) { … };

选择最后一个类名： .exerciseInfo: last-child { … };

选择其中一个指定的类名：.exerciseInfo: nth-of-type(x) { … };

例如：工作中写的

.content2:last-child{
  border-bottom: none;
}