CSS2与CSS3中常用的伪类汇总大全(css3伪类有哪些)

boyanx6天前技术教程2

CSS2与CSS3中有非常多的伪类,可以用于实现各种强大的、酷炫的功能。有用于选择标签状态的,如:a:link a:hover input:checked input:focus等;也有用于根据结构选择标签的,如:li:first-child li:nth-child()等;甚至还有非常少用,但功能强大的,如:li:not() div:target等等。

CSS2的伪类大汇总:

E:link 动态伪类选择器,用于设置未访问的连接

E:visited 动态伪类选择器,用于设置已访问过的连接

E:hover 动态伪类选择器,用于设置鼠标移到标签上的效果

E:active 动态伪类选择器,用于设置鼠标点到连接上的效果

E:focus 焦点伪类选择器,用于设置输入框获取到焦点时的效果

E:lang(zh-cn) 语言伪类选择器,用于选择设置了对应语言的标签

E:first-child 结构伪类选择器,用于选择第一个子元素

CSS3的伪类大汇总:

E:last-child 结构伪类选择器,用于选择最后一个子元素

E:only-child 结构伪类选择器,用于选择仅有的一个子元素

E:nth-child(n) 结构伪类选择器,用于选择指定位置的某个元素

E:nth-last-child(n) 结构伪类选择器,用于选择倒数指定位置的某个元素

E:first-of-type 选择同类型中的第一个同级兄弟元素E

E:last-of-type 选择同类型中的最后一个同级兄弟元素E

E:only-of-type 选择同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n) 选择同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n) 选择同类型中的倒数第n个同级兄弟元素E

E:empty 选择没有任何子元素的元素E

E:checked 用于设置单选与复选框的选中项样式

E:enabled 用于设置可用的输入框的样式

E:disabled 用于设置禁用的输入框的样式

E:target 目标伪类选择器,用于设置当前锚点匹配的目标样式

E:not(s) 否定伪类选择器,用于否定某个选择器

E:root 用于选择文档的根元素,html文档根元素永远是<html>标签

这里面有非常多平时较少用到,但是功能强大的伪类。下面以 :checked为例给大家演示一下复选框的样式重置效果。

复选框与单选框在网页中是不能被随意更改外形的,但是可以使用 :checked伪类模仿一个复选框,这样就可以设置成我们想要看到的效果,例如:

要如何实现呢?

标签: css禁止选中

相关文章

用Python做个随机点名系统,禁止逃课

今天给大家分享一个随机点名的系统并把它打包成exe,压迫感来了没有~一、实现随机点名# -*- coding: UTF-8 -*-import tkinter as tkfrom pandas imp...

用echarts画图表好,还是dhtmlxGantt画图表好?实战验结果

事情是这样的 早些时候,我接到了一个需求,说要将项目里程碑用甘特图展示,一脸懵逼的我先是搜一下什么是“甘特图” :From 百度百科:甘特图(Gantt chart)又称为横道图、条状图(Bar ch...

开发者不可不知的Google Chrome七大新特性

Google Chrome在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools同样也是网络开发者进行网络开发的重要工具。DevTools在不断的进行版本更新,其中有很多重要...

前端入门——css伪类和伪元素(css伪类hover)

伪类(pseudo-class)用于定义元素的特殊状态,伪元素(pseudo-element)用于设置元素指定部分的样式,语法如下:伪类selector:pseudo-class { proper...

Python爬虫:用Beautifulsoup爬取html文本数据

Beautifulsoup介绍:是一个高效的网页解析库,可以从HTML或XML文件中提取数据支持不同的解析器,比如,对HTML解析,对XML解析,对HTML5解析就是一个非常强大的工具,爬虫利器一个灵...

如何快速写出表格代码?exl表格转换成html代码

1、在exl中编辑好你想要的表格形式,复制有内容的表格到dw右侧,如图:2、将途中宽度去除,选中一个宽度,按Ctrl+F,点击“替换全部”。如图:3、途中选中部分换成表格的表头代码:表头代码:<...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。