CSS的选择符

浏览数：26 / 时间：2015年06月09日

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>