阅读 567
早知道 CSS 有这 5 个伪元素,代码也不至于写那么复杂了!

早知道 CSS 有这 5 个伪元素,代码也不至于写那么复杂了!

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」         ,赢取创作大礼包,挑战创作激励金

前言

我们都知道,页面样式通常写在 CSS 规则里。但有时候为了实现一些特殊的效果,往往会借助 JavaScript。最佳实践当然是职责分离:CSS 负责表现,HTML 负责结构,JavaScript 负责行为。所以,样式上能用 CSS 解决的,尽量不用 JavaScript。这样代码更简洁、易维护,性能也更好。

本文将介绍 5 个 CSS 伪元素,你可能从来没听说过,或者没用过。一起来看看吧!

::first-letter

对块级元素第一行的第一个字符设置样式,并且这个字符前面没有其他内容(例如图片或者内联表格),只对块级元素生效。这个伪元素在博客文章用得比较多,比如:

image.png 用伪类实现就比较简单了:

html

<div>
    <p>对块级元素第一行的第一个字符设置样式,并且这个字符前面没有其他内容(例如图片或者内联表格),只对块级元素生效。</p>
 </div>
复制代码

css


p {
  line-height: 1.5;
}

p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px3px0 red;
  font-size: 250%;
  padding: 6px3px;
  margin-right: 6px;
  float: left;
}
 
复制代码

效果:

image.png

::first-line

::first-letter类似,用于设置文本或者块级元素的第一行内容的样式。

html

  <div>
    <p>跟`::first-letter`类似,用于设置文本或者块级元素的第一行内容的样式。</p>
    <p>跟`::first-letter`类似,用于设置文本或者块级元素的第一行内容的样式。</p>
    <p>跟`::first-letter`类似,用于设置文本或者块级元素的第一行内容的样式。</p>
    <p>跟`::first-letter`类似,用于设置文本或者块级元素的第一行内容的样式。</p>
  </div>
复制代码

css

div::first-line {
  color: blue;
  text-transform: uppercase;

  /* WARNING: 这些样式不起作用 */
  /* 很多属性在 ::first-line 伪元素里是无效的 */
  margin-left: 20px;
  text-indent: 20px;
}
复制代码

效果

image.png

::selection

匹配被用户选取的选取是部分。只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

html

<h1>请试着选取页面上的文本</h1>
<p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div>
复制代码

css

::selection {
      color: #ff0000;
      background-color: aqua;
}
::-moz-selection {
  color: #ff0000;
  background-color: aqua;
}
复制代码

效果

可以看见我们选中的文本变成了我们设置的颜色,是不是很神奇?

image.png

::backdrop

Experimental:  这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

这个伪元素有点面生,它是跟 viewport 大小一致的盒子,当页面处于全屏模式时充当背景。比如利用它设置全屏视频的背景色:

示例

复制代码

video::backdrop { background-color: #448; }

复制代码

效果

image.png

注意当 backdrop 可见时,上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的,但上面的 CSS 语句修改了它的外观。

::placeholder

::placeholder 选择器用于选取带有占位符文本的表单元素,并让您设置占位符文本的样式。

占位符文本使用 placeholder 属性设置,这个属性规定描述输入字段期望值的提示文本。

提示:在大多数浏览器中,占位符文本的默认颜色为浅灰色。

html

<input type="text" name="fname" placeholder="First name">
复制代码

css

::-webkit-input-placeholder { /* Edge */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: red;
}

::placeholder {
  color: red;
}
复制代码

效果

image.png 这个背景是因为我写的时候时间上正好触发了浏览器的夜间模式了,颜色变了不是这个样式的问题哈!

小结

这几个比较好玩的CSS 伪元素就给大家献上啦,希望大家可以用得上!

彦祖看到这里了觉得有用就留个赞吧!求评论求收藏

src=http___dingyue.ws.126.net_1kNX5UOlvvZhqzVi4eMVTefclpP9NYP6nSIQPkU9McOAq1553651252093compressflag.jpg&refer=http___dingyue.ws.126.jpg

文章分类
前端
文章标签