::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-color
和 color
生效。