CSS 选择器参考手册 下载本文

内容发布更新时间 : 2024/12/24 3:16:07星期一 下面是文章的全部内容请认真阅读。

}

浏览器支持

所有主流浏览器都支持 :first-letter 选择器。 定义和用法

:first-letter 选择器用于选取指定选择器的首字母。 注释:以下属性可与 :first-letter 使用:

? ? ? ? ? ? ? ? ? ? ? ?

字体属性 颜色属性 背景属性 外边距属性 内边距属性 边框属性 text-decoration

vertical-align(只有在 float 为 'none' 时) text-transform line-height float clear

CSS :first-line 选择器

实例

选择每个

元素的首行,并为其设置样式: p:first-line {

background-color:yellow; }

—20—

浏览器支持

所有主流浏览器都支持 :first-line 选择器。 定义和用法

:first-line 选择器用于选取指定选择器的首行。 注释:以下属性可与 :first-line 使用:

? ? ? ? ? ? ? ? ? ?

字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

CSS :first-child 选择器

实例

选择属于其父元素的首个子元素的每个

元素,并为其设置样式: p:first-child {

background-color:yellow; }

浏览器支持

所有主流浏览器都支持 :first-child 选择器。

—21—

注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 。 定义和用法

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。 亲自试一试 - 实例 例子 1

选择每个

中的每个元素并设置其样式,其中的

元素是其父元素的第一个子元素: p:first-child i {

background:yellow; } 例子 2

选择列表中的第一个

  • 元素并设置其样式: li:first-child {

    background:yellow; } 例子 3

    设置每个

      的首个子元素,并设置其样式: ul>:first-child {

      background:yellow; }

      —22—

      CSS :before 选择器

      实例

      在每个

      元素的内容之前插入新内容: p:before {

      content:\台词:\}

      浏览器支持

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

      注释:对于 IE8 及更早版本中的 :before,必须声明 。 定义和用法

      :before 选择器在被选元素的内容前面插入内容。 请使用 content 属性来指定要插入的内容。 亲自试一试 - 实例

      在每个

      元素前面插入内容,并设置所插入内容的样式: p:before {

      content:\台词:-\background-color:yellow; color:red; font-weight:bold; }

      CSS :after 选择器

      —23—

      实例

      在每个

      元素的内容之后插入新内容: p:after {

      content:\台词:\}

      浏览器支持

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

      注释:对于 IE8 及更早版本中的 :after,必须声明 。 定义和用法

      :after 选择器在被选元素的内容后面插入内容。 请使用 content 属性来指定要插入的内容。 亲自试一试 - 实例

      在每个

      元素后面插入内容,并设置所插入内容的样式: p:after {

      content:\台词:-\background-color:yellow; color:red; font-weight:bold; }

      CSS :lang 选择器

      实例

      —24—