CSS 选择器参考手册

内容发布更新时间 : 2024/11/14 21:13:21星期一 下面是文章的全部内容请认真阅读。

选择带有以 \开头的lang属性值的每个

元素,并设置其样式: p:lang(en) {

background:yellow; }

浏览器支持

所有主流浏览器都支持 :lang选择器。

注释:对于 IE8 中的 :lang,必须声明 。 定义和用法

:lang选择器用于选取带有以指定值开头的lang属性的元素。

注释:该值必须是整个单词,即可是单独的,比如lang=\,也可后跟连接符,比如lang=\。

CSS3 element1~element2 选择器

实例

为所有相同的父元素中位于 p 元素之后的所有ul元素设置背景: p~ul {

background:#ff0000; }

浏览器支持

所有主流浏览器都支持 element1~element2 选择器。 注释:对于 IE8 中的该选择器,必须声明 。 定义和用法

element1~element2 选择器 element1 之后出现的所有 element2。

—25—

两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。

CSS3 [attribute^=value] 选择器

实例

设置 class 属性值以 \开头的所有 div 元素的背景色: div[class^=\ {

background:#ffff00; }

浏览器支持

所有主流浏览器都支持 [attribute^=value] 选择器。 注释:对于 IE8 及更早版本中的 [attribute^=value],必须声明 。 定义和用法

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。 亲自试一试 - 实例

设置 class 属性值以 \开头的所有元素的背景色: [class^=\ {

background:#ffff00; }

CSS3 [attribute$=value] 选择器

实例

—26—

设置 class 属性值以 \结尾的所有 div 元素的背景色: div[class$=\ {

background:#ffff00; }

浏览器支持

所有主流浏览器都支持 [attribute$=value] 选择器。 注释:对于 IE8 及更早版本中的 [attribute$=value],必须声明 。 定义和用法

[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素。 亲自试一试 - 实例

设置 class 属性值以 \结尾的所有元素的背景色: [class$=\ {

background:#ffff00; }

CSS3 [attribute*=value] 选择器

实例

设置 class 属性值包含 \的所有 div 元素的背景色: div[class*=\ {

background:#ffff00; }

—27—

浏览器支持

所有主流浏览器都支持 [attribute*=value] 选择器。 注释:对于 IE8 及更早版本中的 [attribute*=value],必须声明 。 定义和用法

[attribute*=value] 选择器匹配属性值包含指定值的每个元素。 亲自试一试 - 实例

设置 class 属性值包含 \的所有元素的背景色: [class*=\ {

background:#ffff00; }

CSS3 :first-of-type 选择器

实例

指定父元素的首个 p 元素的背景色: p:first-of-type {

background:#ff0000; }

浏览器支持

所有主流浏览器均支持 :first-of-type 选择器,除了 IE8 及更早的版本。 定义和用法

—28—

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

提示:等同于 :nth-of-type(1)。

CSS3 :last-of-type 选择器

实例

指定父元素的最后一个 p 元素的背景色: p:last-of-type {

background:#ff0000; }

浏览器支持

所有主流浏览器均支持 :last-of-type 选择器,除了 IE8 及更早的版本。 定义和用法

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

提示:等同于 :nth-last-of-type(1)。

CSS3 :only-of-type 选择器

实例

指定属于父元素的特定类型的唯一子元素的每个 p 元素: p:only-of-type {

background:#ff0000; }

—29—

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4 ceshi