CSS伪类整理笔记
0 伪元素
虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果。
css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称。用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::
一个选择器一般来说只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。
常见的伪元素有以下几种:
::after
::before
::first-letter
::first-line
::selection
::backdrop
(1) ::selection CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。
(2) ::first-letter会选中某 block-level element(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格) 。
(3) ::first-line CSS pseudo-element (CSS伪元素)在某 block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。
::first-line 不能匹配任何真实存在的html元素。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中,::first-line 是不起作用的。
(4) 伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。例如<video>
video::backdrop {
background-color: #fff;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
}
1 伪类
伪类是为了通过选择器找到文档树中不存在的信息或基本选择器找不到的信息。
css3中规定,伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
任何常规选择器可以再任何位置使用伪类。
伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。
*当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式,例如当鼠标悬停在元素上面时,或者当一个复选框被禁用或被勾选时,又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。
常见的伪类及其功能可以用下图表示:
1. :active :它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 :link,:hover和 :visited。为了正常加上样式,需要把 :active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。(伪类之间的权重相同,遵守后面覆盖前面的特性)。
2. :indeterminate CSS 伪类 表示状态不确定的表单元素。
3. :in-range CSS 伪类 代表一个 <input> 元素,其当前值处于属性min 和max 限定的范围之内.
4. :optional CSS 伪类 表示任意没有required属性的 <input><select> 或 <textarea> 元素使用它。
5. :invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素 .
6. :visited CSS伪类表示用户已访问过的链接。出于隐私原因,可以使用此选择器修改的样式非常有限.这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式,请将:visited 规则放在:link 规则之后,但在:hover 和:active 规则之前,参照 LVHA 顺序::link — :visited — :hover — :active。
7. :target CSS 伪类 代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配 .
8. :lang() CSS 伪类基于元素语言来匹配页面元素。
2 伪类与伪元素的特性及其区别
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;
- 可以同时使用多个伪类,而只能同时使用一个伪元素;
在css2中并没有明确区分伪元素和伪类。
CSS伪类整理笔记的更多相关文章
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类
CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
随机推荐
- (详细)华为畅享7 SLA-AL00的usb调试模式在哪里打开的流程
就在我们使用Pc链上安卓手机的时候,如果手机没有开启usb开发者调试模式,Pc则不能够成功检测到我们的手机,有时我们使用的一些功能比较好的的应用软件如之前我们使用的一个应用软件引号精灵,老版本就需要打 ...
- Actor模型浅析 一致性和隔离性
一.Actor模型介绍 在单核 CPU 发展已经达到一个瓶颈的今天,要增加硬件的速度更多的是增加 CPU 核的数目.而针对这种情况,要使我们的程序运行效率提高,那么也应该从并发方面入手.传统的多线程方 ...
- Windows2012R2 NTP时间同步
Windows2012R2 NTP时间同步 Windows2012R2里没有了internet时间,需要使用另外的方式去做时间同步 下面分两个情况 两个情况,两个情况都需要用修改组策略的方式来做 情况 ...
- 消息 4900,级别 16,状态 2,第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败。对于已启用更改跟踪的表,不可能切换其分区。请先禁用更改跟踪,再使用 ALTER TABLE SWITCH。
问题描述: 今天处理切换分区数据的时候出现了这个错误: 消息 4900,级别 16,状态 2,第 1 行 对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败.对于已启用更改跟 ...
- 为Arch Linux安装搜狗输入法
我们在使用电脑的时候很多时候需要输入中文,这个时候如果没有一个中文输入法那么就是一件非常尴尬的事情了.我门现在开始在我们的archlinux来安装sougou输入法 1.我们需要配置我们的源 arch ...
- 我的第一个python web开发框架(30)——定制ORM(六)
在开发中,查询操作是使用最多的,而查询列表是其中之一,查询列表可分为分页查询和不分页查询(它们之间多了一次总记录数查询),还可以分为单表查询和多表关联查询,返回的结构体根据前端使用的表单框架不同而有所 ...
- c#实验一:基于winform的冒泡排序练习
一.界面设计 在排序前textbox中输入数字,以逗号隔开,通过两个button实现降序排序或升序排序,然后在排序后textbox中显示 三个关键点: 1.监测输入是否合法,最好使用正则表达式 2.拆 ...
- 【English 】20190319
BOKO鼻子['boʊkoʊ] pores毛孔['pɔ:z] cute漂亮可爱[kjut] DEKO-BOKO pores don't make a girl cute! ideal最理想的[aɪˈ ...
- Linux systemtap定位系统IO资源使用情况(ok)
一.systemtap介绍 SystemTap是一个强大的调试工具,是监控和跟踪运行中的Linux 内核的操作的动态方法,确切的说应该是一门调试语言,因为它有自己的语法,也有解析.编译.运行等过程(准 ...
- SpringCloud 学习网址记录
SpringCloud Gateway https://www.cnblogs.com/ityouknow/p/10141740.html 熔断降级的概念 https://blog.csdn.net/ ...