伪元素选择符

最新推荐文章于 2022-04-10 11:38:13 发布

月疯

最新推荐文章于 2022-04-10 11:38:13 发布

阅读量407

点赞数 1

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119579303

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

::first-line 伪元素用于向文本的首行添加特殊样式。

<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>

::first-letter 伪元素用于向文本的首字母添加特殊样式。（伪元素只适用于块级元素）

<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>

::before 伪元素可用于在元素内容之前插入一些内容。

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(/i/photo/smile.gif);
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>::before 伪元素在一个元素的内容之前插入内容。</p>

<h1>这是一个标题</h1>

</body>
</html>

::after 伪元素可用于在元素内容之后插入一些内容。

<style>
h1::after {
  content: url(/i/photo/smile.gif);
}
</style>

::selection 伪元素匹配用户选择的元素部分。

<style>
::-moz-selection { /* 针对 Firefox 的代码 */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>

月疯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素选择符

::first-line 伪元素用于向文本的首行添加特殊样式。<style>p::first-line { color: #ff0000; font-variant: small-caps;}</style>::first-letter 伪元素用于向文本的首字母添加特殊样式。（伪元素只适用于块级元素）<style>p::first-letter { color: #ff0000; font-size: x...
复制链接

扫一扫

专栏目录