XML:CSS样式选择器

 

    所谓选择器，就是应用某个样式到某个元素的名称，这个其实也不好解释，选择器也就稍微“官方”一点，所以就暂时这样称呼（即使这个称呼不好理解）
       最常用的选择器按照应用场景后者应用方式不同大概分为四种类型的选择器：
       1、类型选择器
       2、后代选择器
       3、ID选择器
       4、类选择器

       下面就这四种选择器分别做一下简单的介绍:

      a . 类型选择器：用来寻找特定类型的元素，比如div（一些书籍或软件把这个称为层，但也不太准确，实际上是division，部分的意思，当然部分这个说法也不好理解）、标题等，只需要指定希望应用的元素名称即可，这种选择器也称为元素选择器或简单选择器

1  div  {} { font-size:9pt; }
2  h1  {} { color:black }

 
      b . 后代选择器：用来寻找元素的后代，看下面的例子

1  div ul li  {} { list-style:inline; }
2

 
      如果想应用到div元素下的ul元素下的li元素，可以用上面的样式，而不在div 的 ul下的li不会被应用。

      c . ID选择器：通常用于寻找特定的元素，ID选择器由一个#加上名称表示，如下所示

1  #title  {} { font-weight: bold; }
2
3  <span id="title">Title Text</span>
4
5

      d . 类选择器：同ID选择器一样，也用于寻找特定的元素，由一个点号加名称表示，如下所示

1  .title  {} { font-weight: bold; }
2  
3  <span class="title">Title Text</span>

      那我们究竟选择那种选择器比较合适呢，很多CSS开发人员过度依赖类选择器和ID选择器，如果希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么他们很可能创建两个类并且在每一个标题上应用一个类，一种简单的方法是使用类型、后代、ID或类几种方式的组合：

 1   < Style >
 2 #first h1 {}{ color:green; }
 3 #second h1 {}{ color:black; }
 4  </ Style >
 5
 6   < div  id ="first" >
 7    < h1 > HI first! </ h1 >
 8   .
 9   </ div >
10
11   < div  id ="second" >
12    < h1 > HI second! </ h1 >
13   
14   </ div >
15

      至此，比较常用的选择器大家可能都比较了解了，下面说说不常用的，但也许非常有用的选择器。

      大家都见过这样的样式：

1  a:link  {} { color:red; }
2  a:visited  {} { color:gray; }
3  a:hover, a:active  {} { color:blue; }
4

      虽然见过，但可能都叫不出名称，这种称为伪类，确切的说是链接伪类，除此之外，还有其他伪类，如：

1  tr:hover  {} { background-color:#cccccc; }
2  input:focus  {} { font-weight:bold; }
3

      链接伪类只能用于锚(a)元素；:hover、:active、:focus称为动态伪类，理论上可以应用于任何元素，但遗憾的是，IE6及以下版本不支持，不知道IE7能支持不，少数其他浏览器支持，比如Firefox，IE6及以下版本只应用了锚(a)的:active和:hover，其他的都忽略了。

      还有有一种比较少见的选择器，就是通用选择器，但这种选择器比较强大，形式如下：

1  *  {} {
2   margin:0px;
3   padding:0px;
4   font-size:9pt;
5 }

      这样一个样式，可以应用于当前页面的所有元素，所以说这种类型的选择器强大一点也不过分。

      另外，有一些比较高级的选择器，但同动态伪类一样，IE目前是不支持的，不过Firefox和Safari是支持的，这些高级的选择器包括子选择器、相邻同胞选择器以及属性选择器等，在这里就不再多说了，毕竟后面的都不太常用，最心痛的是IE不支持，也许IE更高版本会支持的。 

请你注意一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以安全使用在链接上

　　伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。

　　link 没有点击过的链接 
　　visited以点击过的链接 
　　active获得焦点时的链接（比如在点击时） 
　　hover 鼠标在链接上面

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

　　尽管CSS里可以省略它们，但维护不同颜色的链接对于新手是个很好的练习。由于伪类（相比hover）不是经常使用，作为公用属性是非常不幸的特性。由于这样，它不像以前那么重要，但如果为最优用户响应考虑，应该使用它。

　　传统默认，文本链接是蓝色，访问后是紫色，理论上可以使用很多不同颜色效果，但，再次，逐渐广泛使用CSS，使得链接变得不再普通，平均用户也不再认为链接必须是蓝色或紫色。

　　除了链接其他元素也可以使用hover伪类。不幸的是，ie7以下的浏览器不支持，这样有许多漂亮的效果不能在IE上实现。

CSS伪类的语法有两种：

第一种：

selector:pseudo-class {property: value} 

例句：

a:link {color:red}

第二种：

selector.class:pseudo-class {property: value}

例句：

a.c1:link {color:red}

锚(a)伪类

锚(a)伪类是最常用的伪类。例句如下：

a:link {color: #FF0000}     /* 未被访问的链接 红色 */

a:visited {color: #00FF00}  /* 已被访问过的链接 绿色 */

a:hover {color: #FFCC00}   /* 鼠标悬浮在上的链接 橙色 */

a:active {color: #0000FF}   /* 鼠标点中激活链接 蓝色 */

也可以用HTML的class属性来设定伪类。例句如下：

a.c1:link {color: #FF0000}     /* 未被访问的链接 红色 */

a.c1:visited {color: #00FF00}  /* 已被访问过的链接 绿色 */

a.c1:hover {color: #FFCC00}   /* 鼠标悬浮在上的链接 橙色 */

a.c1:active {color: #0000FF}   /* 鼠标点中激活链接 蓝色 */

注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。