利用 CSS 的 content 屬性 attr 抓取資料
CSS的 content CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內(nèi)容电媳。使用content 屬性插入的內(nèi)容都是匿名的可替換元素锥咸。
attr(X) 將元素的X屬性以字符串形式返回。如果該元素沒(méi)有 X 屬性今瀑，則返回一個(gè)空字符串。區(qū)分大小寫(xiě)的屬性返回值依賴文擋的語(yǔ)言設(shè)定腔丧。
url()URI值會(huì)指定一個(gè)外部資源（比如圖片）放椰。如果該資源或圖片不能顯示，它就會(huì)被忽略或顯示一些占位（比如無(wú)圖片標(biāo)志）愉粤。
<div data-msg="open this file in github desktop">
hover
</div>
<!--link前面加一個(gè)icon-->
<a >Home Page</a>
div{
width: 100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}
a::before{
content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
font: x-small Arial,freeSans,sans-serif;
color: gray;
}
利用 nth-of-type 選擇某范圍內(nèi)的子元素
/*偶數(shù)*/
tbody tr:nth-of-type(2n){
background-color: red;
}
/*奇數(shù)*/
tbody tr:nth-of-type(2n+1){
background-color: green;
}
讓文字像古詩(shī)一樣豎著呈現(xiàn)
<div class="verticle-mode">
<h4>詠柳</h4>
<p>碧玉妝成一樹(shù)高砾医，
<br>萬(wàn)條垂下綠絲絳。
<br>不知細(xì)葉誰(shuí)裁出衣厘，
<br>二月春風(fēng)似剪刀如蚜。</p>
</div>
.verticle-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
移動(dòng)web頁(yè)面支持彈性滾動(dòng)
-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.
-webkit-overflow-scrolling: touch; /* 當(dāng)手指從觸摸屏上移開(kāi)，會(huì)保持一段時(shí)間的滾動(dòng) */
-webkit-overflow-scrolling: auto; /* 當(dāng)手指從觸摸屏上移開(kāi)影暴，滾動(dòng)會(huì)立即停止 */
body{
-webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
overflow:auto;
}
-webkit-overflow-scrolling屬性具有繼承效果错邦，所以在 body 上設(shè)置即可，這樣局部滾動(dòng)條就非常的流暢了型宙。
改變 input 焦點(diǎn)光標(biāo)的顏色
caret-color 屬性用來(lái)定義插入光標(biāo)（caret）的顏色撬呢，這里說(shuō)的插入光標(biāo)，就是那個(gè)在網(wǎng)頁(yè)的可編輯器區(qū)域內(nèi)妆兑，用來(lái)指示用戶的輸入具體會(huì)插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西魂拦。
input {
caret-color: red;
}
CSS 如何實(shí)現(xiàn)文字兩端對(duì)齊
CSS 屬性 text-align-last 描述的是一段文本中最后一行在被強(qiáng)制換行之前的對(duì)齊規(guī)則。
語(yǔ)法
auto | start | end | left | right | center | justify
p {
text-align-last:justify;
}
讓網(wǎng)站所有圖片變成黑白色彩的
CSS濾鏡（filter）屬提供的圖形特效搁嗓，像模糊芯勘，銳化或元素變色。過(guò)濾器通常被用于調(diào)整圖片腺逛，背景和邊界的渲染荷愕。
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
sources
