CSS(26) -- 碎点点[ 内含 content 属性 ]

<1> :nth-child() 和 :nth-of-type()的区别

:nth-child()是单纯的选出第几个孩子！！

div p:nth-child(2)

• 上述代码即为选出 div 中的第 2 个孩子

     - 且如果该孩子是 p 标签的话，该选择器指定的样式才能生效！！！
     - 如果第 2 个孩子不是 p 标签，那么该选择器里的样式就不生效！！！
  

:nth-of-type() 是选出第几个指定的标签的孩子

div p:nth-of-type(2)

• 上述代码为选出 div 中第 2 个 p 标签孩子

      - 如果只有一个 p 标签孩子，那么该选择器指定的样式就不生效！！
  

栗子：

div h1:nth-child(2){
    color: red;
}
div h1:nth-of-type(2){
    color: pink;
}

产生的效果如下：

<2> 基于伪元素的图片内容生成技术

需求：图片还没加载时就把 alt 信息呈现出来。

实现 ：当图片没有 src 时，::before和::after 可以生效，我们可以通过 content 属性呈现 alt 属性值。当图片的 src 属性加载完毕后，图片从普通元素变成替换元素，原本还支持的::before和::after 此时全部无效，

<3> content 属性

content ：我们使用 content生成的文本是无法选中、无法复制的，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取。content是一个非常强大的CSS属性，其中一个强大之处就是计数器效果，可以自动累加数值。如下：

.total::after{ content: counter(icecream); }

content属性常用于伪元素::after和图片img中：

1>栗子： 图片 img：

img:hover{
 content: url(laugh-tear.png); 
}

content 改变的仅仅是视觉呈现，当我们鼠标右键或其他形式保存这张图片时，所保存的还是原来 src 对应的图片。

2>栗子： 加载中...的动画效果： 【. => .. => ... => .】

<div>
正在加载中<dot>...</dot>
</div>

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';  // \A 是换行的效果
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

demo见此！！