伪类after、before的使用

::before//伪元素  :hover//伪类

#all::after{

  display:table;

  clear:both;

  content:"";

}

#all::after:在all里面的最后添加一个虚拟的子元素after

a:hover:带伪类别的a标签

外部容器出现塌陷现象(伪类after、before的使用)的更多相关文章

  1. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

  2. CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

    伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...

  3. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  4. 用CSS伪类实现毛玻璃效果

    效果图: 思路: 内容容器需要一个before伪类,负责引用跟背景容器相同的背景图,还需要一个after伪类,用来加上半透明的白色背景.这两个伪类的层级需都为-1,而内容容器本身的层级为1,这样做可以 ...

  5. HTML+CSS教程(五)外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

    一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...

  6. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  7. 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  9. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

随机推荐

  1. maven windows环境nexus3.0私服搭建

    下载 nexus3.x.x 需要JDK1.8版本到sonatype官网下载开源免费的OSS版本,OSS即为Open Source Software.下载地址:https://www.sonatype. ...

  2. java 标准输出流、标准错误输出流、标准输入流及扫描仪

    初步认识标准输出流.错误输出流.输入流.扫描仪 package com.mydemo.controller; import java.util.Scanner; public class HelloW ...

  3. Eclipse连接sqlserver体验过程

    以前装的sqlserver 2008试用期到了,就按照网上的步骤,彻底删除了sqlserver,然后又重新装了下,再用eclipse连接的时候,发现提示TCP/IP被禁用,然后找到了sqlserver ...

  4. java 中解析json步骤

    一.   JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. Json建构于两种结构:     1.“名称/值”对的集合(A collection ...

  5. Centos 使用C++11 编译

    今天编译代码,发现使用auto后无法编译,我的当前linux内核版本:(4.7之后即可支持C++11) 这时,在编译末尾加入 -std=c++11 就可以正常编译了.如:

  6. fastdfs搭建和使用

    目录 前言 安装 安装插件 tracker storage 用自带的 client 进行测试 想要查看结果必须安装nginx 使用示例 引用 配置 使用 前言 参考网址 错误处理 安装 安装插件 yu ...

  7. socat 的神奇使用方式

    目的是实现科* 学 * 上*网,现在记录一下流程 先在服务器上安装(比如美国,香港,台湾,马来的云主机)squid,easy_rsa, centos 下可以用yum直接安装 $ yum install ...

  8. Vue2学习笔记:v-model指令

    1.v-model指令 <!DOCTYPE html> <html> <head> <title></title> <script s ...

  9. [WinCE | VS2008 | Solution] VS2008 building WinCE projects taking a long time

    1. Open C:\Windows\Microsoft.NET\Framework\v3.5\Microsoft.CompactFramework.Common.targets 2. Find pa ...

  10. Jmeter入门--Badboy使用教程(转)

    一.Badboy下载安装 感谢smxwn分享,转载地址:http://blog.csdn.net/wn_68/article/details/45872269 下载地址:http://www.badb ...