选择符Selector的一些探究

来源:互联网 发布:安装mac os x不能验证 编辑:程序博客网 时间:2024/05/17 08:43

关于选择符Selector

通配选择符 Universal Selector------------>*

小雨的解释“选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。“
*作为通配选择符,可以代表所有类型的单一对象。例如li *{ }就是指定文档中所有li的样式。
但是这样的用法好像效果不大,即使不写*同样可以收到效果。见过这样的写法rt*,
这样文档中所有出现的rt1,rt2,rt3都会应用rt*的样式,这大概就是主要的用处了。
flashlizi在msn中看到过*>html #local这样的用法,至于为什么这样写,还不太清楚。
后来查了w3的解释:
“The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.

If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:

*[lang=fr] and [lang=fr] are equivalent.
*.warning and .warning are equivalent.
*#myid and #myid are equivalent. "
还是人家说得比较清楚。

类选择符 Type Selector

这个比较容易理解:以文档语言对象类型作为选择符。
与DOM中每个Element的实例匹配
h1定义后,文档中所有出现h1标签的地方都会应用该样式
除非你为该标签定义了单独的样式例如h1.single{  }

包含选择符 Descendant Selector
所有被父代包含的标签
e.g., "Match those EM elements that are contained by an H1 element"
Descendant selectors express such a relationship in a pattern.
A descendant selector is made up of two or more selectors separated by whitespace.
包含选择符使用选择符间加空格的形式来表示各个选择符之间的关系,e.g. A B
但是,当A B出现属性重合的时候,问题就来了
e.g. h1 { color: red } em { color: red }
在<H1>This headline is <EM>very</EM> important</H1>中,我们的定义是没有效果的
我们可以这样来实现我们的目的h1 em { color: blue }
最后一点,我们可以使用通配符例如  div * p
甚至可以这样写div p *[href],它表示所有被div&p包含并且有href属性的标签的样式已经被定义了

子对象选择符 Child Selector
子对象选择符是由两个或者更多的选择符通过">"连起来组成
e.g.1  body > P { line-height: 1.3 }
e.g.2  div ol>li p
例子都是表示p作为body或者div ol li的子对象的样式
注意2中">"左右少了空格

Adjacent sibling selectors
在小雨的手册中并没有出现,遵循下面的语法:
E1+E2,当E2出现在E1后,且紧跟在E1后,样式起作用
h1.opener + h2 { margin-top: -5mm }说明只有在具备opener类的h1后,h2才起作用

属性选择符 Attribute selectors
ie中好像不支持,firefox下测试通过