选择带有以 \开头的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—