css 伪类大全,CSS 伪类
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法:
selector:pseudo-class {property:value;}
CSS类也可以使用伪类:
selector.class:pseudo-class {property:value;}
anchor伪类
在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示
实例
a:link{color:#FF0000;}/*未访问的链接*/a:visited{color:#00FF00;}/*已访问的链接*/a:hover{color:#FF00FF;}/*鼠标划过链接*/a:active{color:#0000FF;}/*已选中的链接*/
尝试一下 »
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用:
a.red:visited{color:#FF0000;}CSS语法
如果在上面的例子的链接已被访问,它会显示为红色。
CSS :first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意:在IE8的之前版本必须声明 ,这样 :first-child 才能生效。
匹配第一个
元素
在下面的例子中,选择器匹配作为任何元素的第一个子元素的
元素:
实例
p:first-child{color:blue;}
尝试一下 »
匹配所有
元素中的第一个 元素
在下面的例子中,选择相匹配的所有
元素的第一个 元素:
实例
p>i:first-child{color:blue;}
尝试一下 »
匹配所有作为第一个子元素的
元素中的所有 元素
在下面的例子中,选择器匹配所有作为元素的第一个子元素的
元素中的所有 元素:
实例
p:first-childi{color:blue;}
尝试一下 »
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
注意:IE8必须声明才能支持;lang伪类。
在下面的例子中,:lang 类为属性值为 no 的q元素定义引号的类型:
实例
q:lang(no){quotes:"~" "~";}
尝试一下 »
更多实例
为超链接添加不同样式
这个例子演示了如何为超链接添加其他样式。
使用 :focus
这个例子演示了如何使用 :focus伪类。
所有CSS伪类/元素
选择器
示例
示例说明
input:checked
选择所有选中的表单元素
input:disabled
选择所有禁用的表单元素
p:empty
选择所有没有子元素的p元素
input:enabled
选择所有启用的表单元素
p:first-of-type
选择的每个 p 元素是其父元素的第一个 p 元素
input:in-range
选择元素指定范围内的值
input:invalid
选择所有无效的元素
p:last-child
选择所有p元素的最后一个子元素
p:last-of-type
选择每个p元素是其母元素的最后一个p元素
:not(p)
选择所有p以外的元素
p:nth-child(2)
选择所有 p 元素的父元素的第二个子元素
p:nth-last-child(2)
选择所有p元素倒数的第二个子元素
p:nth-last-of-type(2)
选择所有p元素倒数的第二个为p的子元素
p:nth-of-type(2)
选择所有p元素第二个为p的子元素
p:only-of-type
选择所有仅有一个子元素为p的元素
p:only-child
选择所有仅有一个子元素的p元素
input:optional
选择没有"required"的元素属性
input:out-of-range
选择指定范围以外的值的元素属性
input:read-only
选择只读属性的元素属性
input:read-write
选择没有只读属性的元素属性
input:required
选择有"required"属性指定的元素属性
root
选择文档的根元素
#news:target
选择当前活动#news元素(点击URL包含锚的名字)
input:valid
选择所有有效值的属性
a:link
选择所有未访问链接
a:visited
选择所有访问过的链接
a:active
选择正在活动链接
a:hover
把鼠标放在链接上的状态
input:focus
选择元素输入后具有焦点
p:first-letter
选择每个
元素的第一个字母
p:first-line
选择每个
元素的第一行
p:first-child
选择器匹配属于任意元素的第一个子元素的
元素
p:before
在每个
元素之前插入内容
p:after
在每个
元素之后插入内容
p:lang(it)
为
元素的lang属性选择一个开始值
css 伪类大全,CSS 伪类相关推荐
- css 伪类大全,CSS伪类
简介 CSS 伪类 (Pseudo-classes)是W3C里制定的一套选择器的特殊状态,有几十个之多.语法如下: selector:pseudo-class {property: value;} 我 ...
- 金色css颜色代码大全,CSS颜色代码大全
标签:CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 ...
- html css链接伪类大全,什么是css链接伪类?
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
- css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
- css中什么是伪类选择器?伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
- CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
- CSS 添加上标(用CSS伪类解决js无法赋值实现诸如单位平方的2上标)
有些时候我们需要通过javascript给某个对象(比如elementUI表格列标题)赋值,这时无法按写像HTML代码一样直接用<sup>实现上标等效果,类似这种情况其实我们可以利用CSS ...
- CSS学习(05结构伪类选择器 浮动及清除)
文章目录 一 结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点 二 伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三 标准流 四 浮动 4.1 浮动的产生 4.2 ...
最新文章
- H3C 交换机命名规则
- 模板:使用文件作为输入
- 解析CleanMyMac隐私保护内容与使用
- 180326新闻:创客授牌仪式新闻稿
- 添加 code snippets (转)
- ssrs 数据分页_如何在SSRS中使用JSON数据
- 硕士研究生阶段如何学习slam机器人?
- __stack_chk_fail栈检查失败
- oracle的安装教程
- series转换成dataframe
- 外设驱动库开发笔记51:SDP800差压传感器驱动
- Nginx代理域名证书替换失效
- mount reason give by server:Permission denid
- CCSC考试基本情况
- 【项目实战】Python基于OpenCV和卷积神经网络CNN进行车牌号码识别项目实战
- 【数据结构】 栈的知识点
- 20140228老沙的感觉
- Postgresql的Listen-Notify机制
- 什么是数据资产?数据资产管理应该如何落地?
- python 通达信自动下载收盘和财务数据
热门文章
- 001_JavaScript数组常用方法总结及使用案例
- 自适应和响应式区别以及写法
- SSAO + FXAA
- 实现类似shared_ptr的引用计数
- Windows API一日一练(40)CreateRectRgn和CombineRgn函数
- (原创)批处理学习小结
- ubuntu服务器系统日志在哪里,如何在Ubuntu上查看和写入系统日志文件
- 并发编程学习之线程8锁
- Spring Cloud Sleuth链路跟踪之使用Mysq保存服务链路跟踪信息(学习总结)
- redis分布式锁+事务+AOP一起使用注意点