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文本的第一个单词或字(如中文 ...
随机推荐
- szfpga Lattice高速下载器HW-USBN-2B 常见问题解答
.产品特点 1). 支持windows7,Windows10 操作系统,两个操作系统非常稳定不断线. 2). 支持JTAG 模式,速度快,最高30Mb/s,调试serdes core,不会像hw-us ...
- SQLite总结
废话不多说: 优点,高并发读快速度读取超越所有主流大中型数据库 缺点,缺少同步机制,读写不能同时,且同时只能有一个写入线程 用途,硬盘式缓存 另附一SQLite工具类: import java.io. ...
- Node. js 有哪些全局对象？
一.是什么 在浏览器 JavaScript 中,通常window 是全局对象, 而 Nodejs中的全局对象是 global 在NodeJS里,是不可能在最外层定义一个变量,因为所有的用户代码都是当前 ...
- 《c#高级编程》第2章C#2.0中的更改（二）——匿名类型
一.概念 C#中的匿名类型是一种特殊类型,可以在运行时动态创建一个对象,该对象可以包含多个属性,这些属性的名称和类型可以在创建时指定.相对于定义具体的类,匿名类型更加灵活和简洁. C#的匿名类型通常用 ...
- 从托管到原生，MPP架构数据仓库的云原生实践
简介:本文介绍了云原生数据仓库产品AnalyticDB PostgreSQL从Cloud-Hosted到Cloud-Native的演进探索,探讨为了实现真正的资源池化和灵活售卖的底层设计和思考,涵盖 ...
- 阿里云边缘云全新架构升级，助力CDN操控新体验
简介: 本次升级根据上万企业客户的使用反馈和行业应用特征,从简单开通到个性化定制,从内容分发到边缘计算完整解决方案,对客户侧的使用体验进行了全局梳理和全链路优化,推进边缘云CDN操控革新,并逐步构建 ...
- 学术顶会再突破！计算平台MaxCompute论文入选国际顶会VLDB 2021
简介: VLDB 2021上,阿里云计算平台MaxCompute参与的论文入选,核心分布式调度执行引擎Fangorn.基于TVR Cost模型的通用增量计算优化器框架Tempura等分别被Indu ...
- 2018-2-13-win10-uwp-右击选择-GridViewItem-
title author date CreateTime categories win10 uwp 右击选择 GridViewItem lindexi 2018-2-13 17:23:3 +0800 ...
- Linux 环境下制作 deb 软件包
一.简介 前面的笔记中已经展示过了,怎么移植的一个工具境到 ARM 环境中,对于使用 buildroot 和 yocto 的朋友来说,此笔记就没有作用了,因为管理工具包会帮我们把这个工作处理了,就算需 ...
- 修改element，vant,mint等ui框架的样式
vant和mint移动端常见,引入单独的css文件,在main.js中引入下即可,直接在对应的vue文件的css通过控制台查看中修改也行,再不济加!important element: 1.vue框架 ...