JQuery选择器(选择器简介)

在开始学习JQuery选择器之前，有必要了解一下CSS（层叠样式表）技术。CSS是一项出色的技术，它使得网页的结构和表现样式完全分离。利用CSS选择器能够轻松的对某个元素添加样式而不改变HTML结构，只需通过添加不同的CSS规则，就可以得到各种不同样式的网页。常用的CSS选择器分类如下表：

选择器语法描述示例标签选择器

E{

CSS规则

}

以文档元素作为选择符

td{

font-size:14px;

width:120px;

}

ID选择器

#ID{

CSS规则

}

以文档元素的唯一标示ID

作为选择符

#note{

　　font-size:14px;

　　width:120px;

}

类选择器

E.className

{

　　CSS规则

}

以文档元素的class作为选择符

div.note{

font-size:14px;

}

.dream{

font-size:14px;

}

群组选择器

E1,E2,E3{

　　CSS规则

}

多个选择符应用同样的样式

td,p,div.a{

　　font-size:12px;

　　width:120px;

}

后台选择器

 E F{

 　　CSS规则

}

元素E的任意后代元素F

#div a{

　　color:red;

} 

通配选择器

*{

　　CSS规则

} 

以文档的所有元素作为选择符

*{

　　font-size:14px;

} 

 

---

几乎所有主流浏览器都支持上面这些常用的选择器，此外CSS中还有伪类选择器，子选择器(E > F{CSS规则})，临近选择器(E + F{CSS规则})和属性选择器(E[attr]{CSS规则})。但主流浏览器并非完全支所有的CSS选择器。

下面来看看CSS简单的示例：

• <p style="color:red;font-size:30px;">CSS Demo</p>

上面代码的意思是将<p>元素里的文本颜色设置为红色，字体大小设置为30px;

像上面这样把CSS代码和HTML代码混杂在一起的作法非常不妥，因为它不符合表现和内容相分离的设计原则，因此建议使用下面的方法:

• <style type="text/css">
• .demo{
• 　　color:red;
• 　　font-size:30px;
• }
• </style>
• <P class="demo">CSS Demo</P>