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下可以。