CSS基础：CSS选择符

日期：2007年8月21日作者：查看:[大字体中字体小字体]

p > strong {color:green;} /* －正确。strong 和 p 是“父/子”关系*/
div > strong {color:green;} /* －错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接*/

临近选择器和通用选择器：通用选择器以星号“*”表示，可以用于替代任何 tag 。
实例：

h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/

二.选择符分类介绍

1.通配选择符
语法：

* { sRules }

说明：
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
示例：

*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }

2.类型选择符
语法：

E { sRules }

说明：
类型选择符。以文档语言对象(Element)类型作为选择符。
示例：

td { font-size:14px; width:120px; }
a { text-decoration:none; }

3.属性选择符
语法：

E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr = value ] { sRules }

说明：
属性选择符。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
示例：

h[title] { color: blue; }
/* 所有具有title属性的h对象 */

span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a[rel~="copyright"] { color:black; }

4.包含选择符
语法：

E1 E2 { sRules }

说明：
包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
示例：

table td { font-size:14px; }

div.sub a { font-size:14px; }

5.子对象选择符
语法：

E1 > E2 { sRules }

说明：

CSS基础：CSS选择符相关文章：

·多个CSS样式表争夺特定选择符的控制权

·利用插件来校验XHTML是否符合Web标准

·JavaScript中split字符串函数

·加快效率：将常用文件夹变为盘符