css

 

 

background-image: url(/images/img/login/tsi_logo.png);
background-size: contain; /* 20% auto */
background-position: right bottom;
background-repeat: no-repeat;
background-color: #fff


/*或者这样：*/
background: url(/images/img/login/tsi_logo.png) no-repeat 100% 100%; /*这里包括了 background-image、background-repeat、background-position */
background-size: 26% auto ;
background-color: #fff;

 

css 选择器

a[href]{color:red} /* 所有带有 href 属性的 a 标签 */
.vip{color:red}  /* 所有带有 vip 类的标签 */
body p a{color:red}  /* body 标签里的 p 标签里的所有 a 标签 */
p + a{color:red} /* 所有 p 标签的第一个兄弟 a 标签 */
p ~ a:nth-of-type(1){color:red} /*  p 标签的第一个兄弟标签(只匹配一个) */
p ~ .fx1{color:red}  /* 所有 p 标签带有 fx1 类的兄弟标签 */
p > .fx1{color:red} /* 所有 p 标签里的第一层的带有 fx1 类的标签(且不能被block标签隔断，比如 ts3 就不生效) */
a[fxts]{color: red;} /* a里有自定义属性fxts的 */
a[fxts='123']{color: red;} /* a里有自定义属性fxts且值为123的 */
p:first-letter{ color: red; } /* P元素里的文本的第一个字母(p标签里没有就去第一个标签里找) */
p:first-line { color: red; } /* P元素里的第一行文本(只要第一元素都是inlie都算一行, a标签有 href 就跳过) */
p:before{content:"Read this -";} /* 每个 <p>元素文本之前插入Read this - */

.div1 > p{color: red;} // .div1里子级 (第一层里) 的所有p
.div1>:nth-child(3){ background: red; } // .div里 (第一层里) 的第三个子元素， >:nth-child(1) == 里的第几个
.div1 :nth-child(2){ background: red; } // .div里所有元素 (不管多少层) 里的第二个子元素
.div1>:nth-child(1)>:nth-child(3){ background: red; } // .div里 (第一层里) 的第一个子元素 里 (第一层里) 的第三个子元素
p:nth-child(5) // 选择p元素的父级的第5个子元素(这个元素也必须是p元素即同类元素才生效)
div+p // 选择DIV 之后的第一个 P 元素

li[level2]+li{}：选择同级后面相邻的li元素，level2 是 li 标签的内容
li[level2]~li{}：选择同级后面所有的li元素
#divTab_User2 ul li:first-child ： 选择ul 里的第一个li
#divTab_User2 ul li:nth-child(2)：选择ul 里的第二个li

 

滚动条

 可以滚动，且滚动条为0：
.div2{overflow:scroll;}

.div2::-webkit-scrollbar {width : 0px;}

------------------------------- 第一个滚动条样式 -------------------------------------------
.test {
  width   : 50px;
  height  : 200px;
  overflow: auto;
  float   : left;
  margin  : 5px;
  border  : none;
  }
  .scrollbar {
  width : 30px;
  height: 300px;
  margin: 0 auto;
  }
  .test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }



<div class="test test-1">
      <div class="scrollbar"></div>
</div>

------------------------------- 第二个滚动条样式 -------------------------------------------
  .test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  .test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }


<div class="test test-5">
      <div class="scrollbar"></div>
</div>

 

css变量（:root{}里是全局生效）：

ul>:nth-child(1){
            --a: red;
            color:var(--a);
        }

 

禁止点击：pointer-events: none;
允许点击：pointer-events: auto;

禁止文字被选中

 -moz-user-select: none;
 -o-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;

div阴影：-moz-box-shadow: 2px 2px 10px #909090; -webkit-box-shadow: 2px 2px 10px #909090; box-shadow:2px 2px 10px #909090;
文字描边：text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
自动换行：word-break:break-all和word-wrap:break-word
隐藏input点击时出现的默认框：outline:none

元素居中(布局)

 inline元素：
    text-align:center
    line-height: 20px

block元素：
    margin: 0 auto

absolute元素：
    left:50%; margin-left: -20px
    top:50%; margin-top: -20px
    top:0;bottom:0;left:0;right:0;margin:auto
    *left:50%;top:50%;transform:translate(-50%, -50%)

relative元素：
    *left:50%;top:50%;transform:translate(-50%, -50%)

flex元素（display: -webkit-flex；苹果认这个）：
    flex-direction // 选择轴方向；
    flex-wrap //一行不够时要不要换行怎么换行
    justify-content: center // 全水平对齐居中可以选其它
    align-items: center // 全垂直居中对齐可以选其它
    align-self //flex父元素里的子元素可用它单独控制
技巧：用全控(父)来决定水平方向，单独控来决定垂直方向

 文本禁止修改：readonly="true" || disabled="true";