CSS之伪元素

之前做一个需求的时候需要对页面上所有的banner上添加提示文案，例如：这是广告。本来想一个一个广告部件上添加文案div来实现。
后面向同组大佬请教，可以利用css中的伪元素:before来实现。
伪元素，顾名思义，就是它们不是真的HTML页面元素，实际上就一个带有css样式的透明元素，只展示某些css效果，不在dom结构里面显示。
对于添加banner头部的提示文案，使用伪元素是最佳方案。
由于banner大多数都是google上的广告，广告div的id具有一定规律，于是写下如下css代码：

[id*=div-gpt-ad-]>div:before {
        content: "广告";
        color: #8f959e;
        font-family: OpenSans;
        font-size: 8px;
        font-weight: 400;
        line-height: 20.89px;
        text-align: center;
        display: block;
    }

这样所有满足id以div-gpt-ad-开头的div都会增加伪元素的样式，提示文案就顺利地加好了。

后面遇到一个小问题，就是有一些尺寸是1x1的banner也显示了“广告”文案，显得非常突兀。这个时候可以使用:not来排除这些id，改动的css如下：

[id*=div-gpt-ad-]:not(div-gpt-ad-232423423)>div:before {
        content: "广告";
        color: #8f959e;
        font-family: OpenSans;
        font-size: 8px;
        font-weight: 400;
        line-height: 20.89px;
        text-align: center;
        display: block;
    }

如果是多个id需要排除则可以写多个:not，如下：

[id*=div-gpt-ad-]:not(div-gpt-ad-232423423):not(dig-gpt-ad-223245555)>div:before {

对于css3的很多用法我也在继续学习中，记录此文，只为学习反思。