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文本的第一个单词或字(如中文 ...
随机推荐
- nginx重新整理——————分析log数据[六]
前言 简单介绍一下goaccess. 正文 安装: yum install epel-release yum install GeoIP GeoIP-devel GeoIP-data yum inst ...
- button submit你以为你阻止了默认事件?
前言 先解决掉一个误区: 很多人写button的时候,就这样写: <button><botton> 你认为就是默认的submit的时候,这时候就可能出问题了. 当然之所以你没有 ...
- mysql 重新整理——存储引擎[三]
前言 要知道存储引擎这个东西,不是存储的意思,而是io操作. MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛 ...
- Javascript中的继承？如何实现继承？
一.是什么 继承(inheritance)是面向对象软件技术当中的一个概念 如果一个类别B"继承自"另一个类别A,就把这个B称为"A的子类",而把A称为&quo ...
- 力扣41(java)-缺失的第一个正数（困难）
题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数. 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案. 示例 1: 输入:nums = [1,2,0 ...
- Serverless在游戏运营行业进行数据采集分析的最佳实践
简介: 这个架构不光适用于游戏运营行业,其实任何大数据采集传输的场景都是适用的,目前也已经有很多客户正在基于Serverless的架构跑在生产环境,或者正走在改造Serverless 架构的路上. 众 ...
- 阿里云 VPC 内网性能测试最佳实践
简介:本文介绍了在阿里云 VPC 内网执行性能测试的方法.相较于传统的公网性能测试,VPC 内网性能测试完全在客户 VPC 环境进行,无需暴露服务到公网,安全性更高,灵活性更强. 作者:风起 背景 ...
- 简单、有效、全面的Kubernetes监控方案
简介:近年来,Kubernetes作为众多公司云原生改造的首选容器化编排平台,越来越多的开发和运维工作都围绕Kubernetes展开,保证Kubernetes的稳定性和可用性是最基础的需求,而这其中 ...
- Android项目架构设计深入浅出
简介:本文结合个人在架构设计上的思考和理解,介绍如何从0到1设计一个大型Android项目架构. 作者 | 璞珂 来源 | 阿里技术公众号 前言:本文结合个人在架构设计上的思考和理解,介绍如何从 ...
- CNCF TOC 委员张磊：不断演进的云原生给我们带来了什么？
简介: 任何一种云原生技术,它不再是某种能力的弥补,而是更多地将云的能力以某种方式更简单.更高效地透出给我的应用去使用.无论是容器.K8s 还是 Service Mesh,他们都是在不同的环节帮助应用 ...