H5 68-伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>68-伪元素选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
/*
p{
width: 50px;
height: 50px;
background-color: pink;
}
*/ div::before{
content: "爱你";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after{
/*指定添加的子元素中存储的内容*/
content: "么么哒";
/*指定添加的子元素的宽度和高度*/
width: 50px;
/*height: 50px;*/
/*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
height:0;
background-color: pink;
/*指定添加的子元素的显示模式*/
display: block;
/*隐藏添加的子元素*/
visibility: hidden;
} </style>
</head>
<body>
<!--
1.什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素 标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素 -->
<div>
<!--<p>爱你</p>-->
我是文字
<!--<p>么么哒</p>-->
</div> </body>
</html>
H5 68-伪元素选择器的更多相关文章
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- 前端-CSS-4-伪类选择器&伪元素选择器
1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- css 伪元素选择器
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...
随机推荐
- SQL Server的优化器会缓存标量子查询结果集吗
在这篇博客"ORACLE当中自定义函数性优化浅析"中,我们介绍了通过标量子查询缓存来优化函数性能: 标量子查询缓存(scalar subquery caching)会通过缓存结果减 ...
- Cas 服务器 下载、编译及部署
一直想把公司运营的项目的各个子项的认证及授权统一到Cas上,从有想法到现在快一年的时间了.现在才正式着手,有兴趣的朋友一起交流学习一下.具体项目的细节不便透露,整合的大体思路为:1.开发部署Cas服务 ...
- 自动化测试基础篇--Selenium Xpath定位
摘自https://www.cnblogs.com/sanzangTst/p/7458056.html 学习 什么是xpath? XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言 ...
- EOS智能合约开发(二)：EOS创建和管理钱包
上节介绍了EOS智能合约开发之EOS环境搭建及启动节点 那么,节点启动后我们要做的第一件事儿是什么呢?就是我们首先要有账号,但是有账号的前提是什么呢?倒不是先创建账号,而是先要有自己的一组私钥,有了私 ...
- x86服务器MCE（Machine Check Exception）问题
MCE现象 Intel在Pentium 4.Xenon和P6系列处理器中实现了机器检查(Machinecheck)架构,提供能够检测和报告硬件(机器)的错误机制,如系统总线错误.ECC错误.奇偶校验错 ...
- 在泛微系统中修改AD密码的配置
参照文档: Windows server 2008 R2 安装AD域证书:https://blog.csdn.net/zhuyongru/article/details/81107839 配置泛微OA ...
- IPerf——网络测试工具介绍与源码解析（2）
对于IPerf源码解析,我是基于2.0.5版本在Windows下执行的情况进行分析的,提倡开始先通过对源码的简单修改使其能够在本地编译器运行起来,这样可以打印输出一些中间信息,对于理解源码的逻辑,程序 ...
- PostgreSQL远程访问设置
数据库版本:9.3.23(Windows xp系统) 步骤: 1.需要修改数据库安装目录下的pg_hba.conf文件 修改成: 2.并使用psql执行pg_ctl reload重新加载配置文件
- vue原理简介
写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...
- dicom学习文章
https://blog.csdn.net/column/details/dicom.html https://blog.csdn.net/zssureqh/article/details/49231 ...