在开始学习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>