CSS设置小技巧

1. 重置引用组件自带的样式，重置原有样式

<div class="reset-all-styles new"></div>
/* 重置原有样式 */
.reset-all-styles {
   all: initial;
 }
/* 新样式 */
.new{
  float: left;
  margin-top: 10px;
}

 2.根据奇偶设置样式

/* 奇数行的样式 */
.list-style:nth-child(odd){
   background: #f8fbfd;
}

/* 偶数行的样式 */
.list-style:nth-child(even) {
  background: #666;
}

 3. 根据属性设置样式

// 所有含有test属性的元素改变 
[test] {
  background: red;  
}

参考地址：https://www.w3school.com.cn/css/css_selector_attribute.asp

4. 设置背景透明度

.test {
  //RGB三原色加ALPHA
  background-color:rgba(220, 38, 38, 0.2); 
}

5. 设置显示的内容透明度

.test {
  // opacity会影响元素整体内容，包括背景
  opacity:0.2;
}

6. table设置边框

table {
  border-collapse: collapse;
}
table, table tr th, table tr td {
  border: 1px solid #ccc;
}

参考地址：https://blog.csdn.net/web_pei/article/details/86508685

7.