css之伪元素选择器
注：本博客内容来自尚硅谷禹神的前端入门课程
什么是伪元素？
很像元素，但不是元素（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之伪元素选择器的更多相关文章
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- 前端 CSS的选择器 伪元素选择器
介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
随机推荐
- js es6 Iterator
1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...
- sumo简单安装及运行实例
下载解压并添加环境变量 记录一下今天SUMO的安装及使用经验,写的可能比较潦草,没看懂的小伙伴在下方评论,我看到一定会解答. 第一步先打开网址下载sumo: https://sourceforge.n ...
- 华为云CodeArts IDE For Python 快速使用指南
本文分享自华为云社区<华为云CodeArts IDE For Python 快速使用指南>,作者:为云PaaS服务小智. CodeArts IDE 带有 Python 扩展,为 Pytho ...
- 基于阿里云GPU云服务器的AIACC助力UC搜索业务性能提效380%，每年节省数千万成本
简介: 用阿里云GPU计算实例来满足UC极致性价比需求 文丨阿里云神龙计算平台AI加速团队 & UC搜索架构部推理引擎团队 导语:作为国产行列里占有率排名第一的移动浏览器,UC浏览器自身承载着 ...
- 【走进RDS】之SQL Server性能诊断案例分析
简介: 数据库性能诊断不仅对其数据库技能要求较高,而且需要大量的前期准备工作,如收集各种性能基线.性能指标和慢SQL日志等,尤其是面对多数据库性能调优时,往往事倍功半. 客户的困扰 前几天某程序员小王 ...
- 基于 OPLG 从 0 到 1 构建统一可观测平台实践
简介: 随着软件复杂度的不断提升,单体应用架构逐步向分布式和微服务的架构演进,整体的调用环境也越来越复杂,仅靠日志和指标渐渐难以快速定位复杂环境下的问题.对于全栈可观测的诉求也变得愈加强烈,Trace ...
- 当 TiDB 与 Flink 相结合：高效、易用的实时数仓
简介: 利用实时数仓,企业可以实现实时 OLAP 分析.实时数据看板.实时业务监控.实时数据接口服务等用途.但想到实时数仓,很多人的第一印象就是架构复杂,难以操作与维护.而得益于新版 Flink 对 ...
- 评审恩仇录——IDE也能做代码评审？
简介: 云效Codeup推出了本地IDE插件端的评审,免除了黄药师来回华山的奔波之苦 现代科技公司的同事们平日一起交流开发规约和产品需求,肩上共同扛着业务发展和同行竞争的压力,这份还书贻剑的情谊如何能 ...
- 可观测告警运维系统调研——SLS告警与多款方案对比
简介: 本文介绍对比多款告警监控运维平台方案,覆盖阿里云SLS.Azure.AWS.自建系统(ELK.Prometheus.TICK)等方案. 前言 本篇是SLS新版告警系列宣传与培训的第三篇,后续我 ...
- 技术实践第三期｜HashTag在Redis集群环境下的使用
简介:欢迎了解友盟+技术干货第三期内容:Redis集群环境如何按照前缀批量删除缓存.希望能对开发者们在实际应用中有所帮助. 一.背景 数据源列表添加缓存支持,types字段可传多值,如app, mi ...