CSS原来这么神奇

利用 CSS 的 content 属性 attr 抓取资料

CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

attr(X) 将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。

url()URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。

 <div data-msg="open this file in github desktop">
        hover
    </div>
    <!--link前面加一个icon-->
    <a href="http://www.mozilla.org/en-US/">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;
}

content 属性 attr.png link前面加一个icon.png

---

利用 nth-of-type 选择某范围内的子元素

/*偶数*/
tbody tr:nth-of-type(2n){  
background-color: red;
}
/*奇数*/
tbody tr:nth-of-type(2n+1){
background-color: green;
}

---

让文字像古诗一样竖着呈现

<div class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，
        <br>万条垂下绿丝绦。
        <br>不知细叶谁裁出，
        <br>二月春风似剪刀。</p>
</div>

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}

---

移动web页面支持弹性滚动

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

body{
   -webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
   overflow:auto;
}

-webkit-overflow-scrolling属性具有继承效果，所以在 body 上设置即可，这样局部滚动条就非常的流畅了。

---

改变 input 焦点光标的颜色

caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

input {
 caret-color: red;
}

---

CSS 如何实现文字两端对齐

CSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。

语法

auto | start | end | left | right | center | justify

 p {
       text-align-last:justify;
   }

MDN

---

让网站所有图片变成黑白色彩的

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

MDN

sources

• https://juejin.im/entry/59c9521e6fb9a00a437b1dbc?utm_source=gold_browser_extension
• MDN