选择符Selector的一些探究

本文主要介绍了HTML中的多种选择符。包括通配选择符,可代表所有类型单一对象;类选择符,以文档语言对象类型为选择符;包含选择符,用空格表示选择符关系;子对象选择符,由“>”连接;相邻兄弟选择符,遵循特定语法;属性选择符,在Firefox下测试通过。

关于选择符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下测试通过

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值