CSS中:和::
一个冒号是伪类,两个冒号是伪元素
伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
伪类有::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中:和::的更多相关文章
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
随机推荐
- destoon搜索伪静态失败解决办法
今天给一个朋友调试DT6.0内核的站点,搜索中文出现http 403 forbidden,找了半天,很纳闷,最后一个一个查看源代码总算找到,在此分享给大家! 解决的方法: 1.找到include/sa ...
- LeetCode 896. Monotonic Array
原题链接在这里:https://leetcode.com/problems/monotonic-array/ 题目: An array is monotonic if it is either mon ...
- plv8 + hashids 生成短连接id
此文章是转载文章的一个学习,稍有改动 环境准备 plv8 环境 version: '3.6' services: postgres: image: dalongrong/plv8:2.3.12 ...
- Linux环境配置与项目部署
简介: Linux是一类Unix计算机操作系统的统称.Linux操作系统的内核的名字也是“Linux”.Linux操作系统也是自由软件和开放源代码发展中最著名的例子.严格来讲,Linux这个词本身只表 ...
- DIV 始终位于文档底部
DIV 始终位于文档底部 设置body为绝对定位,最小显示高度为:100%,宽度为:100%: 设置底部显示块为绝对定位,bottom: 0,是body元素的最后一个直接子元素: 设置底部块元素同级元 ...
- Ajax 与 Django
目录 Django与AJAX orm优化查询: MTV 与 MVC模型 choices 参数 update 与 save的区别 AJAX导入: Jquery 实现AJAX ajax基本语法结构 原生J ...
- java 集合运算
package testjavapro; import java.util.BitSet; public class testjavaa { public static void main(Strin ...
- 第01组 Alpha冲刺(6/6)
队名:007 组长博客: https://www.cnblogs.com/Linrrui/p/11914337.html 作业博客: https://edu.cnblogs.com/campus/fz ...
- 2019-2020-1 20181218《Linux内核原理与分析》第一周作业
目录 问题和参考 有趣/有用的Linux命令 小作业和解答 一些图片 相关学习 本文是学习Linux基础入门(新版)后的总结. 问题和参考 虚拟机莫名崩溃,一天重启了几十次电脑,重装两次系统,心累.想 ...
- Java编程思想之十八 枚举类型
关键字enum可以将一组具名的值的有限集合创建为一种新的类型, 而这些具名的值可以作为常规的程序组件使用.这是一种非常有用的功能. 18.1 基本enum特性 创建enum时,编译器会为你生成一个相关 ...