CSS基础之 选择符
CSS通过一种筛选器决定Web的那一种元素<标签>调用那一种样式,这种筛选器我们称之为:选择符。选择符可以简单的分为简单选择符和复合选择符。所谓简单选择符就是类型选择符、通用选择符加上零个或者多个属性选择符、ID选择符、伪类等;而复合选择符是用>或+符合结合许多的简单选择符。而>或+符号要在简单选择符的两边加上空格,否则不符合语法。当有多个选择符具有相同的样式声明时,可以把多个选择符合在一起,中间用逗号隔开,如:H3,H4{clolor:red;}。具体来说可分为:
1.通用选择符:
CSS中,用”*”号来表示通用选择符,通用选择符所指定的样式可以用到任何标记上,通用选择符很适合用于浏览者的样式表中,可以用通用选择符来指定一些通用的样式。如果既有通用选择符,又用其它的选择符,则通用选择符可以省略不写,如:* .P等同于.P
2.类型选择符:
类型选择符可以与标记的名称相同,它所指定的样式会应用于它所指定的所有相同标记上,如:DIVP等
3.子代选择符:
Web中的元素有时候会按一定的层次出现,即一个元素包含另一个元素。子代选择符就是当一个元素是另外一个元素的子标记时,浏览器会调用子代选择符所指定的样式,它要求至少有两个或两个以上的选择符,选择符之间用空格隔开,如:DIVP,DIVSpanP等
4.子选择符:
子选择符与子代选择符有些想象,只是子选择符只能调用第一层子元素。语法是用”>”号把简单选择符隔开,而且选择符和>符号间要用空格隔开,如:DIV>P,DIVSpan>P
5.邻近选择符:
当两个元素位于同一层,也就是两个元素地位相同时,就可以使用邻近选择符来指定样式。它的语法是:选择符A和B加一个“+”号分开,且选择符和加号之间要有空格,如果A表示的元素在B表示的元素之前,那么只有B所表示的元素才可以调用样式,反之亦然,如:DIV+P
6.属性选择符:
CSS2提供了属性选择符,它上提供属性的标记调用属性选择符指定的样式,有以下四种用法:
(1):[ATT],如果标记提供属性ATT,则调用属性选择符指定的样式。
(2):[ATT=Val],如果标记提供属性ATT,且标记的值和Val一致,则调用属性选择符指定的样式。
(3):[ATT~=Val],如果标记提供属性ATT,标记属性值中的字符串用空格隔开,而且Val是这一字符串的一部分,则调用属性选择符所指定的样式。
(4):[ATT|=Val],如果标记提供属性ATT,标记的属性值中也有一些“—”隔开的字符串,且Val是这一字符串的开始部分,则调用属性选择符所指定的样式。
属性选择符非常有用,比如可以从超链接中挑出只指向某个站点的链接显示特别的样式,但低版本的IE和Opera浏览器不支持属性选择符。
(7):类选择符和ID选择符:
类选择符和ID选择符与属性选择符有些相似,只是类选择符和ID选择符针对的是标记的Class属性和ID属性,语法分别是由“.”和“#”加上相对的属性值,其实“.Value”和“#Value”与“[Class~=value]和[ID~=value]是一样的。
(8):层叠选择符:
当有许多选择符的样式都应用到一个标记时,标记按照下列规则来调用选择符指定的样式:
首先有A,B,C三数,其中A是百位数,B是十位数,C是个位数,如果选择符中有ID选择符,则A加一,如果有属性选择符、类型选择符或伪类则B加一,如果有类型选择符,则C加一。最后那个数值最高,就会调用到样式。
以上就是CSS2中常用的选择符,熟练,巧妙的应用各种选择符可以让代码更精减合理,重用性更高。