移动端 滑动流畅
{
overflow: auto;
-webkit-overflow-scroll: touch;
}
input 等兼容汇总
去掉原生的 input[type="text"] 的样式
{
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
type为search的input,去掉原生close按钮
#Search::-webkit-search-cancel-button
{
display: none;
}
取消textarea的拖动改变大小的功能
textarea{
resize:none;
}
有关input的兼容性设置
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
设置全部的标签 统一样式
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
习惯性 用的盒模型
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table表格
{
border-collapse: collapse;
border-spacing: 0;
}
contenteditable属性的div的placeholder
我们有时候用带有contenteditable属性的div而不是input或者textarea来作为输入框。比如，div可以根据内容自动调整高度。但是div元素不支持placeholder属性。怎么在div内容为空的时候显示一个默认文字呢？可以利用:empty伪类。
<div class="input" contenteditable="true" placeholder="请输入文字"></div>
.input:empty::before {
content: attr(placeholder);
}
使用CSS中的伪类就可以实现 监听输入框的change和focus事件
<input type="text" class="input" required>
<div class="like">点赞</div>
<div class="send">发送</div>
.send {
display: none;
}
.input:focus ~ .send {
display: block;
}
.input:valid ~ .send {
display: block;
color: red;
}
.input:focus ~ .like, .input:valid ~ .like {
display: none;
}
纯CSS实现Tab切换
主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框，所以保证了同一时间只有一个tab处于激活状态。
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">TAB1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">TAB2</label>
<div id="content1" class="tab-content">CONTENT1<div>
<div id="content2" class="tab-content">CONTENT2</div>
input, .tab-content{
display: none;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
display: block;
}
感知子元素的个数
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。
如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素（一共没有四个，也就不存在倒数第四个），那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。
但是如果只用~ li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child。
这样也就实现了根据元素个数的多少来应用不同的样式。
单行显示，溢出自动截取（省略号显示）
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}