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; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...
随机推荐
- C#面向对象 1
using System; using System.Collections.Generic; using System.Collections; using System.Linq; using S ...
- List泛型与DataTable相互转换
public static class ExtensionMethods{/// <summary>/// 将List转换成DataTable/// </summary>/// ...
- PowerDesigner 16.5 使用VBScript脚本从Excel导入物理数据模型
本文使用的数据库类型是Oracle 11g 最近在工作中遇到一个问题:数据的设计以表格的形式保存在Excel文件中.(由于保密原因,我只能看到数据库设计文档,无法访问数据库.=_=!) 其中包括Nam ...
- [Hive_8] Hive 设计优化
0. 说明 在 Hive 中,数据库是一个文件夹,表也是文件夹 partition,是一个字段,是文件 前提:在 Hive 进行 where 子句查询的时候,会将条件语句和全表进行比对,搜索出所需的数 ...
- JAVA API的下载和中文查看API
一.JAVA API的下载 1.1 JAVA由SUN公司开发,2006年SUN公司宣布将Java技术作为免费软件对外发布,标志着JAVA的公开免费.2009年,SUN公司被甲骨文公司收购,因此我们现在 ...
- LeetCode算法题-Number of 1 Bits（Java实现）
这是悦乐书的第186次更新,第188篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第45题(顺位题号是191).编写一个带无符号整数的函数,并返回它所具有的"1 ...
- Markdown语法大全
目录 前言: 1.Markdown基础用法 1.1 目录 1.2 标题 1.3 字体样式 1.4 引用 1.5 图片 1.6 超链接 1.7 列表 1.8 表格 1.9 代码 1.10 流程图 1.1 ...
- ESLint笔记
ESLint是JavaScript的代码检查工具.因为JS是弱类型的语言,不需要编译,代码错误是在运行时调适的,所以需要个工具在编码的过程发现问题.ESLint的初衷是为了让程序员可以创建自己的检测规 ...
- 简单的C#TCP协议收发数据示例
参考:http://www.cnblogs.com/jzxx/p/5630516.html 一.原作者的这段话很好,先引用一下: Socket的Send方法,并非大家想象中的从一个端口发送消息到另一个 ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...