css之伪元素选择器如何使用

这篇文章主要介绍“css之伪元素选择器如何使用”，在日常操作中，相信很多人在css之伪元素选择器如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css之伪元素选择器如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联是专业的昭通网站建设公司，昭通接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行昭通网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

css之伪元素选择器如何使用

伪元素选择器

CSS中伪元素选择器的是在指定CSS选择器增加关键字。用来描述某个指定元素的特定部分设定样式。

通过伪元素，开发者不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。

在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。

语法结构如下所示：

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

现在应该都采用两个冒号的方式，除非你还兼容IE8。

注意：一个选择器中只能使用一个伪元素，而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范，在定义伪元素时您应该使用双冒号::而不是单个冒号:，以便区分伪类和伪元素。但由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用单冒号和双冒号两种方式来定义伪元素。

CSS 中提供了一系列的伪元素，如下表所示：

伪元素	例子	例子描述
::after	p::after	在每个元素之后插入内容
::before	p::before	在每个元素之前插入内容
::first-letter	p::first-letter	匹配每个元素中内容的首字母
::first-line	p::first-line	匹配每个元素中内容的首行
::selection	p::selection	匹配用户选择的元素部分
::placeholder	input::placeholder	匹配每个表单输入框（例如）的 placeholder 属性

::before和::after伪元素

::before伪元素的作用是作为定位的HTML元素的第一个子级元素，::after** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：





    
    
    
    ::before和::after伪元素
    



    这是一段测试内容

代码运行结果如下图所示：

css之伪元素选择器如何使用

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

none：不会产生伪类元素。
normal：::before伪元素和::after伪类元素中会被视为 none。
text：文本内容。
url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：





    
    
    
    ::first-letter和::first-line伪元素
    



    我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；

代码运行结果如下图所示：

css之伪元素选择器如何使用

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

font属性
color属性
background属性
margin属性
padding属性
border属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
float属性
clear属性

::first-line选择器可以设置的CSS属性：

font属性
color属性
background属性
word-spacing属性
letter-spacing属性
text-decoration属性
vertical-align属性
text-transform属性
line-height属性
clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：





    
    
    
    ::first-letter和::first-line伪元素
    



    我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；

代码运行结果如下图所示：

css之伪元素选择器如何使用

::placeholder伪元素

伪元素 ::placeholder 用来设置表单元素（、元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：</p><pre><!DOCTYPE html> <html> <head> <style> input.text::placeholder{ color: red; background-color: #CCC; } </style> </head> <body> <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br> <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果 </body> </html></pre><p>代码运行结果如下图所示：</p><p><img src="/upload/otherpic72/4515.jpg" alt="css之伪元素选择器如何使用"></p><p>到此，关于“css之伪元素选择器如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！</p> <br> 当前题目：css之伪元素选择器如何使用 <br> 文章来源：<a href="http://6mz.cn/article/pejhpj.html">http://6mz.cn/article/pejhpj.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcojpoo.html">包含注塑车间sap管理系统的词条</a> </li><li> <a href="/article/dcojpdc.html">网页数据库配置php 网站数据库配置文件</a> </li><li> <a href="/article/dcojpdh.html">go语言编程书收入 go语言高级编程怎么样</a> </li><li> <a href="/article/dcojpdd.html">go语言教学大纲 go语言教程pdf 百度云</a> </li><li> <a href="/article/dcojpde.html">java按组查询功能代码 java数组查询元素位置的方法</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上快上网。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求

联系我们

028-86922220

手机：13518219792
地址：成都市太升南路288号锦天国际A幢1002号
24小时服务热线：400-028-6601

网站建设服务

网页设计
网站制作
网站开发

网站推广服务

营销网站建设
百度快速排名
整站网站推广

网站运维服务

基础维护
网站改版
网站维护

微信二维码

微信二维码

友情链接：达州做网站成都网站推广四川国泰民安消防明安消防器材广汉锦华温岭熙道网站成都网站建设公司软文发布平台柴油发电机组维修成都企业网站改版

网站建设知识

css之伪元素选择器如何使用

伪元素选择器

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US