.Net Life

My Life
posts - 14, comments - 42, trackbacks - 1, articles - 5
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

浅谈CSS样式选择器

Posted on 2007-05-25 10:13 Benking 阅读(374) 评论(0)  编辑 收藏 网摘 所属分类: CSS/XHTML

      今天谈谈选择器,所谓选择器,就是应用某个样式到某个元素的名称,这个其实也不好解释,选择器也就稍微“官方”一点,所以就暂时这样称呼(即使这个称呼不好理解)
       最常用的选择器按照应用场景后者应用方式不同大概分为四种类型的选择器:
       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更高版本会支持的。

      有什么不对的地方希望大家指出~


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索
[推荐职位]上海盛大网络招聘.Net开发工程师



China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!
开发者征途系统新作:《设计模式——基于C#的工程化实现及扩展》

相关文章:

相关链接: