css3 选择器:伪元素(四)

::first-letter
::first-line
::before
::after
::selection
:: 双冒号与 : 单冒号其实是一样的,使用双冒号是 css3 为了区分伪元素与其他伪类选择器而修改的,最终都会被浏览器识别成双冒号,::selection 无法使用单冒号。
  • ::first-letter
<style>
p::first-letter{font-size: 40px; float: left;}
</style>
<body>
    <p>中新网北京6月14日电 (记者 李金磊)随着天津提高2017年最低工资,记者梳理发现,今年以来,至少已有上海、深圳、陕西、山东、青海、福建、天津等7个地区上调了最低工资标准。其中,上海、深圳、天津的月最低工资标准超过了2000元大关。</p>
</body>

::first-letter 可以匹配标签内容的首个字符,利用该方法可以很方便的排版首字符下沉浮动,只能适用块级元素。

  • :first-line
<style>
p::first-line{font-size: 40px;}
</style>
<body>
    <p>中新网北京6月14日电 (记者 李金磊)随着天津提高2017年最低工资,记者梳理发现,今年以来,至少已有上海、深圳、陕西、山东、青海、福建、天津等7个地区上调了最低工资标准。其中,上海、深圳、天津的月最低工资标准超过了2000元大关。</p>
</body>

::first-line 匹配标签内容的首行文字,只能适用块级元素。

  • ::before
<style>
p::before{ display: block; content: 'aa'; width: 40px; height: 40px; background-color: red;}
</style>
<body>
    <p>1-1</p>
</body>

::before 可以在元素内部最前面生成一个元素,并以 content 为文本内容显示出来,而且 content 是必须的。

  • ::after
<style>
p::after{display: block; content: 'bb'; width: 40px; height: 40px; background-color: red;}
</style>
<body>
    <p>1-1</p>
</body>

::after 可以在元素内部最后生成一个元素,并以 content 为文本内容显示出来,而且 content 是必须的。

  • ::selection
<style>
p::selection{ background: red;}
</style>
<body>
    <p>中新网北京6月14日电 (记者 李金磊)随着天津提高2017年最低工资,记者梳理发现,今年以来,至少已有上海、深圳、陕西、山东、青海、福建、天津等7个地区上调了最低工资标准。其中,上海、深圳、天津的月最低工资标准超过了2000元大关。</p>
</body>

::selection 适配选中文案的样式,但只会对 background-colorcolor 生效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容