移動端 滑動流暢
{
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;
}
有關(guān)input的兼容性設(shè)置
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;
}
設(shè)置全部的標(biāo)簽 統(tǒng)一樣式
* {
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;
}
習(xí)慣性 用的盒模型
{
-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可以根據(jù)內(nèi)容自動調(diào)整高度软族。但是div元素不支持placeholder屬性痪伦。怎么在div內(nèi)容為空的時候顯示一個默認(rèn)文字呢？可以利用:empty偽類遭贸。
<div class="input" contenteditable="true" placeholder="請輸入文字"></div>
.input:empty::before {
content: attr(placeholder);
}
使用CSS中的偽類就可以實現(xiàn) 監(jiān)聽輸入框的change和focus事件
<input type="text" class="input" required>
<div class="like">點贊</div>
<div class="send">發(fā)送</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實現(xiàn)Tab切換
主要是利用了單選框元素的:checked偽類和相鄰選擇器戈咳。因為是單選框，所以保證了同一時間只有一個tab處于激活狀態(tài)壕吹。
<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;
}
感知子元素的個數(shù)
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
:nth-last-child(n+4)這一個選擇器的意思就是倒數(shù)第四個以及之前的元素著蛙，后面加了~ li，就是表示符合前面條件的元素之后的li元素耳贬。
如果元素總數(shù)不足4踏堡，則不會存在符合:nth-last-child(n+4)的元素（一共沒有四個，也就不存在倒數(shù)第四個）咒劲，那么li:nth-last-child(n+4) ~ li就不會選擇任何的元素了顷蟆。
但是如果只用~ li，是不會匹配到第一個li的腐魂，所以又加上了li:nth-last-child(n+4):first-child帐偎。
這樣也就實現(xiàn)了根據(jù)元素個數(shù)的多少來應(yīng)用不同的樣式。
單行顯示蛔屹，溢出自動截认鞣（省略號顯示）
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}