注：本博客内容来自尚硅谷禹神的前端入门课程

什么是伪元素？

很像元素，但不是元素（element），是元素中的一些特殊位置。

伪元素语法中的::可以用:，因为css2中没有明确区分伪类和伪元素，但是selection和placeholder是css3才出现的新特性，所以必须用::

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>伪元素选择器</title>

    <style>

        /* 选中的是div里的第一个元素 */

        div::first-letter {

            color: red;

            font-size: 40px;

        }

        /* 选中的是div的第一行元素 */

        div::first-line  {

            background-color: yellow;

        }

        /* 选中的是div中被鼠标选中的文字 */

        div::selection {

            background-color: yellowgreen;

            color: orange;

        }

        /* 选中的是input中的提示文字 */

        input::placeholder {

            color: skyblue;

        }

        /* 选中的是p元素最开始的位置，随后创建一个子元素 */

        p::before {

            content: "¥";

        }

        /* 选中的是p元素最后的位置，随后创建一个子元素 */

        p::after {

            content: ".00";

        }

    </style>

</head>

<body>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni veritatis id dolor quibusdam reiciendis officia saepe, delectus autem, cumque, non similique quam maxime! Dolorum sunt atque consectetur suscipit praesentium ex!</div>

    <br>

    <input type="text" placeholder="请输入您的用户名">

    <p>199</p>

    <p>299</p>

</body>

</html>

​
 

css之伪元素选择器的更多相关文章

  1. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  5. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  6. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  7. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  9. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  10. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

随机推荐

  1. redis 简单整理——redis 的有序集合基本结构和命令[六]

    前言 简单介绍一下redis的有序集合的基本结构和命令. 正文 有序集合相对于哈希.列表.集合来说会有一点点陌生,但既然叫有序 集合,那么它和集合必然有着联系,它保留了集合不能有重复成员的特性, 但不 ...

  2. （节流）js防止重复频繁点击或者点击过快方法

    1.方法一:用定时器定时,没跑完定时器,点击按钮无效 <script> var isClick = true; $("button").on("click&q ...

  3. IT人才能嗑到的这对CP，甜！

    简介: 提到文件存储,相信大家都不陌生,在浩瀚的存储发展史中,文件存储无疑是璀璨的,耀眼的.那么,在性能已经成为刚需,自动驾驶行业风起云涌的当下,文件存储与GPU这对CP又有怎样的含糖量呢?今天,我们 ...

  4. [FE] JS 判断当前是否在微信浏览器中的最新代码

    注意以下使用了 const 定义未改变的变量,没有使用 var. function isWeChatBrowser () { const ua = window.navigator.userAgent ...

  5. SemanticFunction 自然语言函数

    本文将和大家介绍 LLM 的魔法,通过自然语言编程的方式开发 SemanticFunction 函数 大家都知道,编程里面的函数可以是一个完成某个功能的逻辑片段,绝大部分的函数都需要使用人类不友好的编 ...

  6. k8s证书延长时间(二)

    1.查看证书有效时间 # 通过下面可看到ca证书有效期是10年,2022-2032 [root@master ~]# openssl x509 -in /etc/kubernetes/pki/ca.c ...

  7. 什么是IPD项目管理模式？聊聊IPD下的产品研发流程

    IPD(集成产品开发)涵盖了产品从创意提出到研发.生产.运营等,包含了产品开发到营销运营的整个过程.围绕产品(或项目)生命周期的过程的管理模式,是一套生产流程,更是时下国际先进的管理体系.IPD(集成 ...

  8. Kimi：文本解析利器，你相信光么？

    缘起 第一次接触 kimi 是在微信群,开始以为是推广薅羊毛产品,后来在其他渠道也了解到 kimi,据说是"国产之光".我知道很多同学苦不能使用魔法久矣,索性就先踩踩这个" ...

  9. 【2023知乎爬虫】我用Python爬虫爬了2386条知乎评论！

    目录 一.爬取目标 二.展示爬取结果 三.爬虫代码讲解 3.1 分析知乎页面 3.2 爬虫代码 四.同步视频 五.完整源码 您好,我是 @马哥python说,一枚10年程序猿. 一.爬取目标 前些天我 ...

  10. 我用 GitHub 9.8k 的 Go 语言 2D 游戏引擎写了个游戏

    前言 hi,大家好,这里是白泽.今天给大家分享一个 GitHub 9.8k 的 Go 语言 2D 游戏引擎. https://github.com/hajimehoshi/ebiten 引擎的贡献者依 ...