css 伪类元素详解 (二)

::BEFORE/:BEFORE

:before 伪元素与:after 类似，都可以为其他 HTML 元素添加内容（文本或图形）。同样，这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。需要在 CSS 中声明 content 属性。

记住，通过这个伪元素生成的内容不能通过其他选择符选中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:before {
    content: "Hello "; /* 注意Hello后面有一个空格 */}

结果网页中会变成这样：

Hello Ricardo!
注意： 看到“Hello ”后面的空格了吗？没错，空格也算数。

::AFTER/:AFTER

:after 伪元素也用于为其他 HTML 元素添加内容（文本或图形）。这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。为了使用这个伪元素，必须在 CSS 中声明 content 属性。

同样，通过这个伪元素添加的任何内容都无法通过其他选择符选中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:after {
    content: ", Web Designer!";}

结果如下：

Ricardo, Web Designer!

::BACKDROP (EXPERIMENTAL)

::backdrop 伪元素是在全屏元素后面生成的一个盒子，与:fullscreen 伪类连用，修改全屏后元素的背景颜色。

注意： ::backdrop 伪元素必须用双冒号。

还看前面:fullscreen 伪类的例子。

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen::backdrop {
    background: orange;}

看示例：http://codepen.io/ricardozea/pen/bEPEPE

::FIRST-LETTER/:FIRST-LETTER

:first-letter 伪元素选择一行文本第一个字符。

如果相应行前面包含图片、视频或表格元素，那么不会影响选择第一个字符。

这个伪元素非常适合对段落进行排版，有了它就不必用图片或其他技巧了。

提示： 这个伪元素也可以选中:before 伪元素生成的第一个字符。

CSS:

h1:first-letter  {
    font-size: 5em;}

::FIRST-LINE/:FIRST-LINE

:first-line 选择元素的第一行，只适用于块级元素，行内元素不适用。

即使一段文本有多行，也会选中第一行。

CSS:

p:first-line {
    background: orange;}

::SELECTION

::selection选择文档中被高亮选中的部分。

注意，基于Gecko的浏览器要求使用前面：::-moz-selection。

注意： 在一条规则中同时使用带前缀和不还前缀的::selection是不行的，要分别写。

CSS:


::-moz-selection {
color: orange;
background: #333;}::selection {
color: orange;
background: #333;}

::PLACEHOLDER (EXPERIMENTAL)

::placeholder伪元素选择表单元素中通过placeholder属性设置的占位文本。

也可以写成::input-placeholder。

注意： 这个伪元素不是标准的，因此将来有可能会变化。

在某些浏览器（IE10及Firefox 18之前）中，::placeholder伪元素的实现类似一个伪类。其他浏览器都将其视为伪元素。因此，除非要兼容IE10或旧版本的Firefox浏览器，因此应该这样写：

HTML:


<input type="email" placeholder="name@domain.com">

CSS:

input::-moz-placeholder {
    color:#666;}input::-webkit-input-placeholder {
    color:#666;}/* IE 10 only */input:-ms-input-placeholder {
    color:#666;}/* Firefox 18 and below */input:-moz-input-placeholder {
    color:#666;}

::BEFORE/:BEFORE

:before 伪元素与:after 类似，都可以为其他 HTML 元素添加内容（文本或图形）。同样，这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。需要在 CSS 中声明 content 属性。

记住，通过这个伪元素生成的内容不能通过其他选择符选中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:before {
    content: "Hello "; /* 注意Hello后面有一个空格 */}

结果网页中会变成这样：

Hello Ricardo!
注意： 看到“Hello ”后面的空格了吗？没错，空格也算数。

::AFTER/:AFTER

:after 伪元素也用于为其他 HTML 元素添加内容（文本或图形）。这里的内容并不实际存在于 DOM 中，但可以像存在一样操作它们。为了使用这个伪元素，必须在 CSS 中声明 content 属性。

同样，通过这个伪元素添加的任何内容都无法通过其他选择符选中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:after {
    content: ", Web Designer!";}

结果如下：

Ricardo, Web Designer!

::BACKDROP (EXPERIMENTAL)

::backdrop 伪元素是在全屏元素后面生成的一个盒子，与:fullscreen 伪类连用，修改全屏后元素的背景颜色。

注意： ::backdrop 伪元素必须用双冒号。

还看前面:fullscreen 伪类的例子。

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1><button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

h1:fullscreen::backdrop {
    background: orange;}

看示例：http://codepen.io/ricardozea/pen/bEPEPE

::FIRST-LETTER/:FIRST-LETTER

:first-letter 伪元素选择一行文本第一个字符。

如果相应行前面包含图片、视频或表格元素，那么不会影响选择第一个字符。

这个伪元素非常适合对段落进行排版，有了它就不必用图片或其他技巧了。

提示： 这个伪元素也可以选中:before 伪元素生成的第一个字符。

CSS:

h1:first-letter  {
    font-size: 5em;}

::FIRST-LINE/:FIRST-LINE

:first-line 选择元素的第一行，只适用于块级元素，行内元素不适用。

即使一段文本有多行，也会选中第一行。

CSS:

p:first-line {
    background: orange;}

::SELECTION

::selection选择文档中被高亮选中的部分。

注意，基于Gecko的浏览器要求使用前面：::-moz-selection。

注意： 在一条规则中同时使用带前缀和不还前缀的::selection是不行的，要分别写。

CSS:


::-moz-selection {
color: orange;
background: #333;}::selection {
color: orange;
background: #333;}

::PLACEHOLDER (EXPERIMENTAL)

::placeholder伪元素选择表单元素中通过placeholder属性设置的占位文本。

也可以写成::input-placeholder。

注意： 这个伪元素不是标准的，因此将来有可能会变化。

在某些浏览器（IE10及Firefox 18之前）中，::placeholder伪元素的实现类似一个伪类。其他浏览器都将其视为伪元素。因此，除非要兼容IE10或旧版本的Firefox浏览器，因此应该这样写：

HTML:


<input type="email" placeholder="name@domain.com">

CSS:

input::-moz-placeholder {
    color:#666;}input::-webkit-input-placeholder {
    color:#666;}/* IE 10 only */input:-ms-input-placeholder {
    color:#666;}/* Firefox 18 and below */input:-moz-input-placeholder {
    color:#666;}

小结
CSS伪类和伪元素相当有用，对不？这些伪类和伪元素提供了丰富的选择便利。

不要光看，自己动手试一试吧。广受支持的伪类和伪元素是很靠谱的。

希望大家看了这篇长文能有所收获。别忘了收藏它！

全部完~

相关链接

css 伪类元素详解(一)

css 伪类元素详解(二)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • css 伪类元素详解 (一)
    刚开始从事 Web 设计时，我犯了很多错误，也因此获得了进步。那时候没有Smashing Magazine、Can...
    前端_周瑾阅读 6,826评论 0赞 1
  • css 伪类、伪元素的区别
    伪类 css2定义：CSS 伪类用于向某些选择器添加特殊的效果。单单看定义完全不懂在讲什么。CSS3定义： 伪类存...
    Sun____阅读 6,060评论 0赞 2
  • 伪元素&伪类
    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类： css引入伪类和伪元素概念是为了格式化文...
    fly_198e阅读 18,484评论 0赞 18
  • 伪类与伪元素详解
    伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的．比如说，当用户...
    葶寳寳阅读 4,574评论 1赞 13
  • 伪元素&伪类
    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类：css引入伪类和伪元素概念是为了格式化文档...
    会飞的贼er阅读 3,671评论 0赞 0

友情链接更多精彩内容