一个冒号是伪类,两个冒号是伪元素

伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

伪类有::first-child ,:link:,:vistited,:hover:,:active,:focus,:lang
伪元素有::first-line,:first-letter,:before,:after

提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全

伪类和伪元素的区别:

伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

:link

伪类将应用于未被访问过的链接,与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接,与:link互斥。

:focus

伪类将应用于拥有键盘输入焦点的元素。

:first-child

伪类将应用于元素在页面中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的情况。

伪元素

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

::first-letter

伪元素的样式将应用于元素文本的第一个字(母)。

::first-line

伪元素的样式将应用于元素文本的第一行。

::before

在元素内容的最前面添加新内容。

::after

在元素内容的最后面添加新内容。

CSS中:和::的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  5. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  8. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  9. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  10. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

随机推荐

  1. Java多线程编程核心技术-第4章-Lock的使用-读书笔记

    第 4 章 Lock 的使用 本章主要内容 ReentrantLocal 类的使用. ReentrantReadWriteLock 类的使用. 4.1 使用 ReentrantLock 类 在 Jav ...

  2. adb命令操作蓝牙

    打开和关闭蓝牙BT adb root adb shell svc bluetooth enable adb shell svc bluetooth disable UI层 查询:adb shell s ...

  3. linux虚拟机获取不到ip的解决方法 --

    问题描述: 在win10操作系统上,安装了centos7 虚拟机,安装后,用wifi网络可以获取ip,但是切换到手机热点或有线网络就获取不到ip 解决办法: 按照一般的修改ONBOOT =yes, 然 ...

  4. idea安装、配置及基本使用

    下载 下载地址:https://www.jetbrains.com/idea/download/#section=windows Ultimate为旗舰版,功能全面,插件丰富,按年收费. Commun ...

  5. LRU Algorithm Gym - 102394L (HASH)

    LRU Algorithm \[ Time Limit: 1000 ms\quad Memory Limit: 524288 kB \] 题意 给出 \(n\) 个数字和 \(m\) 次查询. 每次询 ...

  6. 阿里云物联网平台: Android 连接阿里云物联网平台

    说明 这节是是为下一节做铺垫的 只要是按照我提供的学习路线一节一节的认认真真学过来的,这节就十分的简单 有了前两节的基础,这节呢咱让Android 连接阿里云物联网平台 使用这节的代码  https: ...

  7. [PHP] Laravel 5.5 图片上传功能

    以Laravel 5.5 框架为主,进行文件上传功能的实现如下: 一.配置文件修改 打开 config/filesystems.php 文件在 ‘disks’ 数组中添加如下代码 //自定义 'upl ...

  8. Linux性能优化实战学习笔记:第六讲1

    一.环境准备 1.安装软件包 终端1 机器配置:2 CPU,8GB 内存 预先安装 docker.sysstat.perf等工具 [root@luoahong ~]# docker -v Docker ...

  9. 搭建Hadoop+Python的大数据开发环境

    实验环境 CentOS镜像为CentOS-7-x86_64-Everything-1804.iso 虚机配置 节点名称 IP地址 子网掩码 CPU/内存 磁盘 安装方式 master 192.168. ...

  10. 使用IDEA创建一个Servlet应用程序

    使用IDEA创建一个Servlet应用程序 第一步:创建web应用 选择web application应用,之后填写项目名称等. 第二步:项目配置 在WEB-INF目录下创建两个文件夹:classes ...