CSS3选择器使用汇总

一 通用选择器

1  *{}通配选择符(CSS2):适合所有元素对象。

2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符。

3  E#myid是id选择符(CSS1):以唯一标识符id属性等于myid的E对象作为选择符。

4  E.myclass是类class选择符(CSS1):以class属性包含myclass的E对象作为选择符。

5  E F:包含选择符(CSS1):选择所有被E元素包含的F元素。

CSS3新增的通用选择器:同级元素通用选择器:

1  通用选择器E~F{}:匹配的是E元素之后的同级F元素匹配E后边所有的F,EF同级。只要F在E的后边,E只是作为一个参考。E~F { background:#ff0; }

2  临近(相邻)选择器(css2):E+F{}:EF元素相邻,即选择紧贴在E元素之后F元素。

3  包含(子)选择器(css2):E>F{}:EF不可以隔代,E只能匹配到下一个相邻辈F。

二 属性选择器

1.E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。

2.E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。

3.E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

4.E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

5.E[att] 选择具有att属性的E元素。

6.E[att="val"]选择具有att属性且属性值等于val的E元素。

7.E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

注:4~7是CSS2特有的属性。 input最常用属性选择器。

三  伪类选择器

1 与用户界面有关的伪类:

(1)  E:enabled:匹配表单中激活的元素,表单中可操作的元素。

(2)  E:disabled(常用):常用匹配表单中禁用的元素 disabled="disabled"  。 eg:input[type="text"]:disabled { background:#ddd;} 只可以看不可操作。

(3)  E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素

是整体伪类(匹配整个DOM文档):

(4)  ::selection 匹配用户当前选中的元素,即设置对象被选择时的颜色。 ::selection。

2 结构性伪类

1) :root 匹配文档的根元素,对于HTML文档,就是只能匹配HTML根元素。

2) E:nth-child(n) 匹配其当前元素

E :nth-child(n):匹配其父元素E的第n个子元素,第一个编号为1

E F:nth-child(n):匹配其父元素E的第n个F元素,第一个编号为1(貌似只对ul 可用)

3) E:nth-last-child(n):匹配其父元素的倒数第n个子元素,第一个编号为1。

E:last-child:匹配父元素的最后一个子元素,等同于:nth-last-child(1)。

4) E :nth-of-type(n):与:nth-child(n)作用类似,但是仅匹配使用同种标签的元素。

5) E :nth-last-of-type(n):与:nth-last-child(n) 作用类似,但是仅匹配使用同种标签的元素 。

6) E :first-of-type :匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 。

7) E :last-of-type :匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)。

8) E :only-child:匹配父元素仅有的一个子元素。。

9) E:only-of-type:匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type,:last-of-type或 :nth-of-type(1),:nth-last-of-type(1) 。

10) E :empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素.,空白节点也被看做子节点。

11) E:not(s) 匹配不符合当前选择器的任何元素 :not(:nth-child(1))。

3

1) E:link{}:链接伪类选择器,设置超链接a在未被访问前的样式。

2) E:visited{}:链接伪类选择器,设置超链接a在其链接地址已被访问过时的样式。

3) E:hover{}:用户操作伪类选择器,设置元素在其鼠标悬停时的样式。

4) E:active{}:用户操作伪类选择器,设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

5) E:focus{}用户操作伪类选择器,设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

6) E:lang{}:伪类选择器,匹配使用特殊语言的E元素。

时间: 2024-10-06 02:08:37

CSS3选择器使用汇总的相关文章

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为“id”的任意类型元素 .class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E  F 后代选择器(包含选择器

CSS3选择器:nth-child和:nth-of-type之间的差异(转)

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 参考文章:The Difference Between :nth-child and :nth-of-type 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s

[Selenium] CSS3 选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 e

CSS3选择器:nth-child和:nth-of-type之间的差异——张鑫旭

一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section> 然后两个选择器相对应的CSS

CSS3选择器介绍

1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style type="text/css"> /* id包含div字符串*/ [id*=div] { color: lime; } /*开始字符串为div*/ [i