前端开发第一课 – css1.0选择器

大家好,今天给大家分享的是前端开发的第一课 – css1.0选择器,这是新手步入前端的第一步,一定要动手试着做一遍,理解其中的“奥秘”,高手就可以忽略此篇了,css是前端开发中必不可少的一门技术,虽说比较简单,但也需要时间去学习理解,如果理解不够深入,那么后面遇到的问题将会接踵而至。前端开发中最头痛的是浏览器兼容问题,所以你必须了解你用到的属性与方法在各个主流浏览器下是否支持,如果只是简单的了解下,那么在工作中出现你未知的问题也只能硬着头皮寻求方法或加班解决问题。下面我们进入正题:以下是每一个选择器的一些简述。

1、.class选择器

浏览器支持:所有主流浏览器都支持 .class 选择器。
定义和用法:.class 选择器选取带有指定类 (class) 的元素。
实例

2、#id 选择器

浏览器支持:所有主流浏览器都支持 #id 选择器。
定义和用法:#id 选择器为带有指定 id 的元素设置样式。
实例

3、element 选择器

浏览器支持:所有主流浏览器都支持 element 选择器。
定义和用法:element 选择器用于指定元素名称的所有元素。
实例

4、element,element 选择器

浏览器支持:所有主流浏览器都支持 element,element 选择器。
定义和用法:element,element 选择器用于用于同时选取多个元素。如需为不同的元素设置相同的样式,请用逗号来分隔每个元素。
实例

5、element element 选择器

浏览器支持:所有主流浏览器都支持 element element 选择器。
定义和用法:element element 选择器用于选取元素内部的元素。
实例

6、:link 选择器

浏览器支持:所有主流浏览器都支持 :link 选择器。
定义和用法::link 选择器用于选取未被访问的链接。
注释::link 选择器不会设置已经访问过的链接的样式。
提示:请使用 :visited 选择器对指向已访问页面的链接设置样式,:hover 选择器用于设置鼠标指针浮动到链接上时的样式,:active 选择器用于设置点击链接时的样式。

7、:visited 选择器

浏览器支持:所有主流浏览器都支持 :visited 选择器。
定义和用法::visited 选择器用于选取已被访问的链接。
提示:请使用 :link 选择器对指向未被访问页面的链接设置样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式,:active 选择器用于设置点击链接时的样式。

8、:hover 选择器

浏览器支持:所有主流浏览器都支持 :hover 选择器。
定义和用法::hover 选择器用于选择鼠标指针浮动在上面的元素。
提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

9、:active 选择器

浏览器支持:所有主流浏览器都支持 :active 选择器。
定义和用法::active 选择器用于选择活动链接。当您在一个链接上点击时,它就会成为活动的(激活的)。
提示:请使用 :link 选择器对指向未被访问页面的链接设置样式,:visited 用于设置指向已访问页面的链接的样式,:hover 选择器用于设置鼠标指针浮动到链接上时的样式。
实例:link、:visited、:hover、:active

10、:first-letter 选择器

浏览器支持:所有主流浏览器都支持 :first-letter 选择器。
定义和用法::first-letter 选择器用于选取指定选择器的首字母。
注释:以下属性可与 :first-letter 使用:
font
color
background
padding
border
text-decoration
vertical-align(只有在 float 为 ‘none’ 时)
text-transform
line-height
float
clear
实例

11、:first-line 选择器

浏览器支持:所有主流浏览器都支持 :first-line 选择器。
定义和用法::first-line 选择器用于选取指定选择器的首行。
注释:以下属性可与 :first-line 使用:
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
实例

演示http://demo.sic.hk/ued/01/
下载css1.0选择器示例

Leave a Reply