CSS的选择符
1.通配选择符(Universal Selector)
通配选择符(以*表示)起通配符的作用,意思是将选择其辖域内的所有元素。
改变整个文档的字体大小和颜色：
* {font-size:12px;color:blue;}
改变table下所有元素的颜色及对齐方式：
table * {color:red;text-align:center}
2.类型选择符(Type Selectors)
以文档语言对象(Element)类型作为选择符。
设置td背景色与字体颜色：
td {background:sliver;color:red}
设置a标签无下划线等装饰效果：
a {text-decoration:none}
3.属性选择符(Attribute Selectors)
这个属性用的不是很多，原因是在IE6下都还不能支持，不过在FireFox下可以支持。
它有4种表达形式：
(1) Element[att] {sRules} 选择具有att属性的Element元素
用input插入的任何元素，只要指定了name值，其值为红色：
<style> input[name] {color:red} </style> <input type="text" value="没有name值"> <input type="text" value="有name值" name="txt">
(2) Element[att=value] {sRules} 选择具有att属性,且属性值等于value的元素
<style> input[type="text"] {color:red} input[type="button"] {color:green} </style> <input type="text" value="Type值为text的显示"> <input type="button" value="Type值为button的显示">
(3) Element[att~=value] {sRules} 选择具有att属性，且属性值为用空格分割的字词列表，其中一个等于value的元素
下面的例子，只有第一个用空格分开的"关羽",才能被匹配到：
<style> input[value~="关羽"] {color:red} </style> <input type="text" value="关羽 字云长"> <input type="text" value="关羽字云长"> <input type="text" value="关羽,字云长">
(4) Element[att|=value] {sRules} 选择具有att属性且属性值为一用连字符分隔的字词列表,由value开始的元素
下面的例子，只有第一个有连字符"-"的"赵云",才能被匹配到：
<style> input[value|="赵云"] {color:blue} </style> <input type="text" value="赵云-五虎大将之一"> <input type="text" value="赵云 五虎大将之一"> <input type="text" value="赵云，五虎大将之一">
4.包含选择符(Descendant Selectors)
选择所有被Element1包含的子元素：
Element1 Element2 {sRules}
设置table下所有td的颜色与对齐方式：
table td {color:red;text-align:center}
设置p元素内的strong元素的颜色：
p strong {color:blue}
5.子对象选择符(Child Selectors)
这个属性在IE6下也支持不了，它和包含选择符非常相似，但区别在于：在多层包含关系中，它只能包含一级；而包含选择符能包含多级。
Element1>Element2 {sRules}
假如有这样一个结构的包含关系：
<div>
<p>
<strong>生子当如孙仲谋</strong>
</p>
</div>
那么再看下面的定义，我们设定如果文字颜色变为红色为匹配生效：
div p {color:red} <!--匹配生效--> div strong {color:red} <!--匹配生效--> div>strong {color:red} <!--匹配无效,因为div与strong中间隔着元素p--> p>strong {color:red} <!--匹配生效-->
6.ID选择符(ID Selectors)
以文档目录树(DOM)中作为对象的唯一标示符ID作为选择符
#ID {sRules}
<style> #txt {color:red;border:1px blue solid} </style> <input type="text" id="txt" value="Test ID Selectors">
7.类选择符(Class Selectors)
以类名作为选择符，其效果等同于属性选择符的Element[class~="className"] {sRules}
Element.className {sRules}
<style> div.range {color:red} .note {color:green} </style> <div class="range"> 治世之能臣 <p class="note">乱世之奸雄</p> </div>
8.分组选择符(Grouping)
将同样的定义应用于多个选择符,可以将选择符以逗号分割的方式并为组
Element1,Element2,Element3 {sRules}
<style> div,h1 {font-size:14px;color:red} p,h2 {font-size:14px;color:green} </style> <div> 大江东去，浪淘尽，千古风流人物 <p>古垒西边，人道是:三国周郎赤壁</p> <h1>乱石穿空，惊涛拍岸，卷起千堆雪</h1> <h2>江山如画，一时多少豪杰</h2> </div>
9.伪类及伪对象选择符(Pseudo Selectors)
伪类主要是争对a的几个状态：
a:link、a:visited、a:hover、a:active
其实也有诸如span:hover{color:red}这样的用法，但IE下不支持非a元素的伪类
伪对象一共有4个：
:first-letter、:first-line、:before、:after
<style> div:first-letter {color:red;font-weight:bold;font-size:150%} div:first-line {color:green;} </style> <div> 水调歌头 【宋】苏轼<br> 明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒, 起舞弄清影，何似在人间。<br> 转朱阁，抵绮户，照无眠。不应有恨，何事偏向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。<br> </div>
运行示例，在IE和FireFox下都能显示出效果。
<style> p:before {content:"问题:下面的古文出自哪篇文章?";font-size:x-large;color:blue} p:after {content:"答案:诸葛亮的《出师表》";font-size:x-large;color:red} </style> <p><br>"臣本布衣，躬耕南阳，苟全性命于乱世，不求闻达于诸侯。"<br></p>
运行示例，IE不能显示出效果，在FireFox下可以。
