本文共 3165 字,大约阅读时间需要 10 分钟。
CSS选择器用于选择你想要的元素的样式的模式。伪类元素主要用于对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。
UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选,UI元素状态伪类选择器有如下几个。
示例 | 描述 | 示例 | 描述 |
:link | 选择链接元素 | :visited | 访问过链接元素后的状态 |
:hover | 鼠标悬停其上的元素 | :ative | 鼠标点击时触发的事件 |
:focus | 当前获取焦点的元素 | :enabled | 元素处于可用状态 |
:disabled | 元素处于不可用状态 | :checked | 元素处于选中状态 |
:selection | 当前被选中的内容 | :indeterminate | 当前选中状态不明确的元素 |
:read-only | 处于只读状态的元素 | :read-write | 处于读写状态的元素 |
:required | 具有必填要求的元素 | :optional | 无必须要求填写的元素 |
:valid | 能通过输入校验的元素 | :invalid | 不能通过输入校验的元素 |
:in-range | 当前处于指定范围的元素 | :out-of-range | 当前处于超出范围的元素 |
结构伪类选择器是指根据HTML元素之间的结构关键进行筛选的伪类选择器。
用于匹配HTML文档的根元素,根元素只能是<html>元素。
:root伪选择器 Java Java JavaJava EE Java EE Java EEAjax Ajax AjaxXML XML XMLJava EE Java EE Java EEAndroid Android Android
这组选择器依次要求匹配该元素必须是其父元素的第一个子节点、最后一个子节点、第n个子节点、倒数第n个子节点、唯一的子节点,这是这组选择器的共同特点,下面将示范它的用法,希望大家想学习CSS3选择器的朋友,以实际操作为主,去理解CSS3选择器的含义和用法。
:child
- www.baidu.com
- www.baidu.com
- www.baidu.com
- www.baidu.com
- www.baidu.com
对于nth-child和nth-last-child两个伪类选择器,它们的功能不止于此,还支持奇数、偶数节点和xn+y的用法。
选择器:nth-child(odd/event) | 父元素的第奇数个/偶数个子节点的元素 |
选择器:nth-last-child(odd/event) | 父元素的倒数奇数个/偶数个子节点的元素 |
选择器:nth-child(xn+y) | 父元素的第xn+y个子节点 |
选择器:nth-last-child(xn+y) | 父元素的倒数第xn+y个子节点 |
:nth-child
这组伪类选择器与上面那组xxx-child有些类似,但这组并不要求是父元素的第1个、倒数n个、唯一元素,只要求它们与其有共同类型、同级元素的第1个、倒数n个、唯一元素。也跟上组一样拥有奇偶节点和xn+y的用法。
:type 百度一下No.1
No.2
No.3
No.4
JavaJava EEAjax
XML
Java EE企业应用
Android
Swift
:empty伪类选择器要求该元素只能是空元素,不能包含子节点,也不能包含文本内容(连空格都不行),示例如下。
:empty
lang伪类选择器要求匹配的内容必须是指定语言的元素。对使用多语言版本的网站,可以根据不同语言版本,设置不同的样式。
:lang JavaJava EEAndroid
target选择器要求元素必须是命名锚点(可快速将访问者带到指定位置)的目标,而且必须是正在访问的目标。我们可以通过该选择器高亮显示正在被访问的目标,听了这么多,是不是没怎么明白,让我们一起来看下面的示例,实操一下你就懂了。
:target Java
Java
Java EE
Java EE
Android
Android
Java EE企业应用
Java EE企业应用
not伪类选择器就是用两个选择器做减法,选择器匹配非指定元素或者选择器的每个元素,下面将示范它的用法。
:not
层次选择器是通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素,以下就是层次选择器的类型。
类型 | 示例 | 描述 |
后代选择器 | div p | 选择 <div> 元素内部的所有 <p> 元素 |
子选择器 | div>p | 选择父元素为 <div> 元素的所有 <p> 元素 |
相邻兄弟选择器 | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素 |
通用选择器 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素 |
有些CSS属性还不支持一些浏览器,为了让这些浏览器识别专属属性,CSS规范在CSS属性前增加各自的浏览器前缀。例如:-moz-前缀是Mozilla浏览器(如Firefox)的前缀。常见浏览器前缀如下所示。
前缀 | 组织 | 示例 | 说明 |
---|---|---|---|
-ms- | Microsoft | -ms-interpolation-mode | Interner Explorer浏览器专属的CSS属性需要加上-ms-前缀 |
-moz- | Mozllia | -moz-read-only | 所有基于Gecko引擎的浏览器(Firefox)专属的CSS属性需要加上-moz-前缀 |
-webkit- | Webkit | -webkit-box-shadow | Chrome、Safari、新版Opera专属的CSS属性需要加上-webkit-前缀 |
转载地址:http://iypti.baihongyu.com/