HTML连载50-伪元素选择器、清除浮动方式五
一、伪元素选择器
1.什么是伪元素选择器
伪元素选择器作用给指定标签的内容前面添加一个子元素，或者给指定标签的内容后面添加一个子元素。
2.格式：
标签名称::before{
属性名称：值；
}
给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值；
}
给指定标签的内容后面添加一个子元素
我们举个例子：
div{
width:200px;
height: 200px;
background-color: red;
}
/*p{*/
/*width: 50px;*/
/*height: 50px;*/
/*background-color: pink;*/
/*}*/
div::before{
content:"你是好儿女";
width:70px;
height: 70px;
background-color: blue;
display:block;/*如果不加这个显示的方式，那么上面设置宽高就不会生效*/
}
div::after{
content:"大家都很累";
width: 80px;
height: 80px;
display: block;
background-color: white;
}
..............省略代码...........
<div>
<!--<p>爱你</p>-->
我是文字
<!--<p>不爱你</p>-->
</div>
注意：指定添加的子元素中还可以添加一个属性
visibility:hidden;我们这个伪元素中的内容就会隐藏起来。
二、清除浮动方式五
1.
.box1{
background-color: red;
/*border:1px white solid;*/
}
.box2{
background-color: green;
/*border:1px white solid;*/
}
.box1 p{
width:100px;
background-color: blue;
}
.box2 p{
width:100px;
background-color: red;
}
p{
float:left:
}
.box1::after{
content:"";/*设置子元素为空*/
display:block;
height: 0;/*不占用空间*/
visibility: hidden;
clear:both;/*这个很重要*/
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
</div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
三、源码：
D136_PseudoElementSelector.htmlD137_ClearFloatFive.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D136_PseudoElementSelector.html
https://github.com/ruigege66/HTML_learning/blob/master/D137_ClearFloatFive.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载50-伪元素选择器、清除浮动方式五的更多相关文章
- 利用伪元素:after清除浮动
一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端-CSS-4-伪类选择器&伪元素选择器
1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- css 伪元素选择器
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...
- 前端 CSS的选择器 伪元素选择器
介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...
- 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- 3、前端--伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型
伪元素选择器 # 首字调整>>>:也是一种文档布局的方式 p:first-letter { font-size: 48px; /*字体大小*/ color: red; } # 在文本 ...
随机推荐
- iOS正则表达式解决实际问题
问题:上海市徐汇区桂林路158号1202室 字符串长度不固定,数字长度也不固定.截取第二组数字. 方法一:[正则表达式] NSString * str = @"上海市徐汇区桂林路158号12 ...
- java编译报错 错误: 编码GBK的不可映射字符
解决方法: 1. javac -encoding UTF-8 .\Test_Sql.java //加上参数指定utf-8 2.改变文件编码 使用 ANSI编码.
- node_modules/.bin/babel : 无法加载文件 D:\node\node_project\es6\node_modules\.bin\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。
刚入门es6,遇到上面问题,然后 解决方案: 以管理员身份运行vs code执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的执行:set-ExecutionPo ...
- debug查找主板生产日期
实验环境:XP(XP以上系统没有自带debug) 查询主板生产日期,发现时间为07/02/15 -e命令进行修改日期,尝试将07年改为08年 在查询一下修改完成后的日期,发现日期不变 原因:这块内存是 ...
- 进制转换器V1.0_Beta
一.截图部分 二.代码部分: char2num() 作用:将字符转化成对应的数字 e.g. '9'->9 'A'->10 int char2num(char ch) ...
- LinAlgError: Last 2 dimensions of the array must be square
python 矩阵计算时出现错误 此时如果矩阵不是方阵,就会出现如下错误: 这里值得注意的是:当我们这样使用的时候,程序运行又会很正常: 貌似我们求得了非方阵的逆. 下面我们来验证一下: 仔细一看,这 ...
- ETC到底要不要办？有什么好处？
一说到ETC,开车的朋友想必不会陌生.但很多车友却不太愿意办理ETC, 究其原因,主要是一些谣言所致,一传一十传百最后变成了真实的谎言,并且对此深信不疑, 比如下面5个广泛流传的谣言 在来看看 ...
- NLP入门（九）词义消岐（WSD）的简介与实现
词义消岐简介 词义消岐,英文名称为Word Sense Disambiguation,英语缩写为WSD,是自然语言处理(NLP)中一个非常有趣的基本任务. 那么,什么是词义消岐呢?通常,在我们 ...
- 我的计划任务 --- 实现市电停电安全关闭群辉，Windows, Linux等设备
有一次突然停电,我的群辉DS218+ 的一块硬盘出现故障了,让我担心我的数据安全,其实我是有UPS, 不是在线式的,然后就想如何实现停电自动关机呢? 经过半天的了解,其实群辉支持telnet协议,于是 ...
- docker采用Dockerfile安装jdk1.8案例
1 获取一个简单的Docker系统镜像,并建立一个容器. 这里我选择下载CentOS镜像 docker pull centos 通过docker tag命令将下载的CentOS镜像名称换成centos ...