css相关

1. 伪元素(::first-letter, ::first-line, ::before, ::after)

CSS 标准规定了 first-line 必须出现在最内层的块级元素之内。因此，我们考虑以下代码。

<div>
  <p id=a>First paragraph</p>
  <p>Second paragraph</p>
</div>


div>p#a {
    color:green;
}

div::first-line { 
    color:blue; 
}

这段代码最终结果第一行是蓝色，因为 p 是块级元素，所以伪元素出现在块级元素之内，所以内层的 color 覆盖了外层的 color 属性。

如果我们把 p 换成 span，结果就是相反的。

<div>
  <span id=a>First paragraph</span><br/>
  <span>Second paragraph</span>
</div>


div>span#a {
    color:green;
}

div::first-line { 
    color:blue; 
}

这段代码的最终结果是绿色，这说明伪元素在 span 之外。

::first-letter 的行为又有所不同，它的位置在所有标签之内，我们把前面的代码换成::first-letter。

<div>
  <span id=a>First paragraph</span><br/>
  <span>Second paragraph</span>
</div>


div>span#a {
    color:green;
}

div::first-letter { 
    color:blue; 
    text-transform: uppercase
}

执行这段代码，我们可以看到，首字母变成了蓝色，这说明伪元素出现在 span 之内。