HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器有类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器、相邻同胞选择器和属性选择器，css3定义中有更多的选择器类型，但由于各浏览器支持不一，所以不推荐使用，在此不详细叙述。下面我们具体介绍一些常用选择器。
1-2010240QA3R7.jpg一、ID与类class

选择器是用于控制页面设计的样式，即ID 选择器何类选择器。一直以来，许多开发人员经常将ID 与类混淆，或者不能正确的使用这两种选择器，或者简单的认为是一个代替另一个，这种认知是及其错误的。
(1)、应用ID
每个ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只
用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:

  1. <p id=”hightlight”>This paragraph has red text.</p>

复制代码

相应的CSS 代码:

  1. #hightlight{

  2. color:#FFFFFF;

  3. }

复制代码

(2)、将ID与选择器结合

  1. /*适合所有h2 标题*/

  2. h2{

  3. color:# 333;

  4. font-size:16px;

  5. }

  6. /*只适合title 的h2 标题*/

  7. h2#title {

  8. color:# eee;

  9. }

复制代码

相应的XHTML 代码:

  1. <h2>Title Of My Article</h2>

  2. <h2 id=”title”>Title Of My Article</h2>

复制代码

(3)、ID的使用场合
对于每个ID，每个页面只能有一个元素使用该样式，因此ID 应该为每个页面唯一存在并仅使用一次的元素不保留。
(4)、避免使用ID的场合
当一个以上的地方需要使用同一CSS 规则时，不应该使用ID。
(5)、应用类
类可以无限次的使用，因此它是应用CSS 的非常灵活的方法。

  1. <p class=”hightlight”>his paragraph has red text.</p>

复制代码

相关CSS 代码:

  1. .hightlight {

  2. color:FFFFFF;

  3. }

复制代码

(6)、结合多个类和ID
范例:

  1. <ul id=”drinks”>

  2. <li class=”mix”>Beer</li>

  3. <li class=”mix”>Spirtis</li>

  4. <li class=”hot”>Cola</li>

  5. <li class=”hot”>Lemonade</li>

  6. </ul>

复制代码

相应的CSS 代码:

  1. ul#drinks {

  2. color:FF6600;

  3. }

  4. .mix {

  5. Color:# 999999;

  6. }

  7. .hot {

  8. Color:# 333333;

  9. }

复制代码

(7)、利用类改写基本样式:

  1. p{Color:#ff6600;}

  2. .bleached {Color:#ccc;}

复制代码

相应的XHTML 代码:

  1. <p>This paragraph has red text.</p>

  2. <p class=”bleached”>This paragraph has red text.</p>

复制代码

(8)、直接将类链接到元素上

  1. p.bleached {color:red;}

复制代码

相应的XHTML 代码:

  1. <p class=”bleached”>This paragraph has red text.</p>

复制代码

(9)、避免,适合
对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义唯一性的标记，比如布局，那么用id。

二、层叠

(1)、外部链接实现层叠

  1. <link rel=”stylesheet” type=”text/css” href=”css/one.css”>

  2. <link rel=”stylesheet” type=”text/css” href=”css/two.css”>

  3. <link rel=”stylesheet” type=”text/css” href=”css/three.css”>

复制代码

(2).导入样式实现层叠

  1. @import url(“one.css”)

  2. @import url(“two.css”)

  3. @import url(“three.css”)

复制代码

注意点:必须牢记一个规则,越晚给的规则越重要.

三、分组

  1. h1{

  2. Font-family:隶书,宋体,楷体;

  3. Line-height: 140%;

  4. Color:# 333;

  5. }

  6. h2{

  7. Font-family:隶书,宋体,楷体;

  8. Line-height: 140%;

  9. Color:# 333;

  10. }

  11. h3{

  12. Font-family:隶书,宋体,楷体;

  13. Line-height: 140%;

  14. Color:# 333;

  15. }

  16. /*分组后*/

  17. h1,h2.h3{

  18. Font-family:隶书,宋体,楷体;

  19. Line-height: 140%;

  20. Color:# 333;

  21. }

  22. /*分组例外*/

  23. h1{

  24. Font-style:italic;

  25. }

复制代码

四、继承

  1. h1 {

  2. Color:# 333;

  3. }

  4. <h1>This is the greatest heading <i>in the world</i></h1>

复制代码

从BODY 继承

  1. Body {

  2. Margin:10px;

  3. Font-family:隶书;

  4. Background:#000;

  5. Color:#fff;

  6. }

复制代码

五、上下文选择器

  1. h1{

  2. Color: #ccc;

  3. }

  4. i {

  5. Color:# 000;

  6. }

  7. /*使用上下文选择器*/

  8. h1 I {

  9. Color:# 000;

  10. }

复制代码

六、子类选择器

  1. .box {

  2. color:red;

  3. }

  4. .box1 {

  5. font-weight:bold;

  6. }

  7. .box2 {

  8. font-style:italic;

  9. }

  10. <div class="box">Box</div>

  11. <div class="box box1">Box1</d iv>

  12. <div class="box box2">Box2</d iv>

复制代码

七、其他选择器

(1)、类型选择器

  1. p{color:black;}

  2. a{text-decoration:underline;}

  3. h1{font-weight:bold;}

复制代码

(2)、后代选择器

  1. h2 i{color:red;}

  2. li a{text-decoration:none;}

  3. #main h1{Color:red;}

复制代码

(3)、伪类

  1. a:link{color:blue;}

  2. a:visited{color:green;}

  3. a:hover,a:active{color:red;}

  4. input:focus{background-color:yellow;}

复制代码

(4)、通用选择器

  1. *{

  2. Padding:0;

  3. Margin:0;

  4. }

复制代码

(5)、高级选择器
高级选择器，目前支持还不太完善，所以对于站点功能很重要的任何元素上，应该避免使用这些高级选择器。

1、子选择器和相邻同胞选择器

子选择器

  1. #nav > li {background:url(bg.gif) no-repeat left top;}

  2. <ul id="nav">

  3. <li>Home</li>

  4. <li>Server

  5. <ul>

  6. <li>Development</li>

  7. <li>Consultancy</li>

  8. </ul>

  9. </li>

  10. <li>Contact Us</li>

  11. </ul>

复制代码

相邻同胞选择器:

  1. h1+p{font-weight:bold;}

  2. <h1>Main Heading</h1>

  3. <p>First Paragraph</p>

  4. <p>Second Paragraph</p>

复制代码

2、属性选择器

  1. <strong title=”Cascading Style Sheets”>CSS</strong>

  2. strong[title] {border-bottom: 1px dotted #999;}

  3. strong[title]:hover {cursor:help;background:#ccc}

复制代码

八、代码注释与结构

  1. /*body styles*/

  2. body {

  3. Font-size:67.5%;

  4. }

复制代码

1、添加结构性注释

  1. /*---------------------------------------------------

  2. Version: 1.1

  3. Author: andy budd

  4. Email:info@andybudd.com

  5. Website:http:www.andybudd.com

  6. -----------------------------------------------------*/

复制代码

2.自我提示

  1. /*

  2. Use the star selector hack to give IE a different font size

  3. http://www.info.co.ph

  4. */

复制代码

布局结构是使用有意义的标记。