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文本的第一个单词或字(如中文 ...
随机推荐
- mysql 必知必会整理—sql 排序与过滤[三]
前言 简单整理一下MySQL的排序与过滤. 正文 我们查询出来的结果有时候是希望进行排序的,比如说: select product_name from products order by prod_n ...
- redis哨兵主备切换的数据丢失问题：异步复制、集群脑裂
1.两种数据丢失的情况 主备切换的过程,可能会导致数据丢失 (1)异步复制导致的数据丢失 因为master -> slave的复制是异步的,所以可能有部分数据还没复制到slave,master就 ...
- 面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？
前言 最近有粉丝找到我,说被面试官给问懵了. 粉丝:面试官上来就问"一个vue文件是如何渲染成浏览器上面的真实DOM?",当时还挺窃喜这题真简单.就简单说了一下先是编译成rende ...
- TypeScript 中类的理解？应用场景？
一.是什么 类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础 ❝ 类是一种用户定义的引用数据类型,也称类类型 ❞ 传统的面向对象语 ...
- vue 商品sku添加，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table 不改变table之前输入的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 五福背后的 Web 3D 引擎 Oasis Engine 正式开源
简介: Oasis 从开源走向新的起点,用 3D 化的交互和表达让世界变得更美好. 相信大家已经体验了今年支付宝五福的活动,无论是今年的五福首页还是打年兽游戏都是由蚂蚁互动图形引擎(代号:Oasis ...
- 实时数仓入门训练营：Hologres性能调优实践
简介: <实时数仓入门训练营>由阿里云研究员王峰.阿里云资深技术专家金晓军.阿里云高级产品专家刘一鸣等实时计算 Flink 版和 Hologres 的多名技术/产品一线专家齐上阵,合力搭建 ...
- [Blockchain] 前后端完全去中心化的思路, IPFS 与 Ethereum Contract
我们在使用智能合约的时候,一般是把它当成去中心.减少信任依赖的后端存在. 如果没有特殊后端功能要求,一个 DApp 只需要前端驱动 web3js 就可以实现了. 可以看到,现在前端部分依旧是一个中心化 ...
- 举例useContext性能低下的样例，同时推荐用什么方法改进
在React中,useContext 是一种非常方便的全局状态管理工具,它可以让我们在组件之间共享状态,而不需要通过层层传递 props.然而,当我们在一个大型的 React 应用中过度使用 useC ...
- 记录几十页html生成pdf的历程和坑(已用bookjs-easy解决)(生成、转换、拼接pdf)
懒得看的朋友,先说最终解决办法,主力为 前端依靠插件 bookjs-easy(点击直接跳转官网)并跳转到下面的第三点查看 接下来详细记录下整个试探的方向和历程 项目需求:是生成一个页数达到大几十页的p ...