CSS强大的选择器利器

全面介绍CSS的选择器
服务器君一共花费了158.859 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

一般没有系统的学习过,只是在网上看一些片断教程的人。见到最多的可能也就是:

  • 元素选择符(例如:body 、a 、li )
  • ID选择符(例如:#head、#body、#foot)
  • 类选择符(例如:.red、.item、.content)

今天我们把所有的选择符统统拿出来说个遍。

通配符选择符

所谓通配符其实只是一个星号而已,但这么一个简单的星号作用却是很强大的。通配符一般用来对页面所有元素应用样式。例如:

/*将页面中所有元素的内边距和外边距设置为0*/
*
{
    margin:0;
    padding:0;
}

在有些情况下,可以对特定元素的所有后代元素(后代元素其实就类似是子元素<p>pppp<strong>strong</strong></p>,strong就是P的后代元素)应用样式。例如,将页面中h1标签所包含的所有后代元素的字体设置为黄色,例如:

<style type="text/css">
*{font-size:14px;}
h1{color:blue;}/*将h1下面所有的内容设为蓝色*/
h1 *{color:yellow;}/*将h1下面所有的子标记中的内容设为黄色*/
h1 p *{color:red;}/*将h1下面P标记下面的所有内容设为红色*/
</style>
<h1>h1
<span>h1里面包含个span</span>
<p>h1里面的P<strong>三级strong</strong></p>
</h1>

最后关于通配符还有一点想说的就是,效率的问题。通配符把所有标签都要初始化一遍,浏览器的渲染消耗一定的资源。但是我在想,对于这点资源,除非是那种对性能要求极高,否则我认为没必要太刻意在乎,毕竟还是很方便吗!

类选择符

通配符与标签作为选择符确实很强大,也很好用,但涉及的范围太广泛。如果希望同一个标签在不同位置显示不同的样式,那就需要改变选择符的使用方式,否则存在的弊端太多,这个时候就应该考虑换个方式去定义CSS样式。

类这个概念可能我们大家在C#编程中都接触过,这里提的类选择器其实跟C#中的类是差不多的概念,目的就是体现复用性。减少相同的样式定义多次。

<style type="text/css">
div
{
    font-size:14px;
    color:#ff0000;
    text-decoration:underline;
}
</style>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>

这边我让所有div标签下的文字14px大小带下划线红色文字。

现在想一下如何让第三个DIV变为18px的字体。

<style type="text/css">
.div3
{
    font-size:18px;
}
</style>
<div>div1</div>
<div>div2</div>
<div class="div3">div3</div>
<div>div4</div>

类选择器在CSS中必须以“.”作为前缀,后面紧跟一个定义的类名。这样只要类是“div3”的DIV都以18PX字体显示从而达到了复用的效果了。

ID选择符

ID选择符的形式与类选择符极其相近,只不过类选择符是以点(.) 为前缀的,而ID选择符是以井号(#)为前缀。而两个选择符的用法也很相似。但一个页面中使用ID选择符建议不要出现同名的ID,因为javascript操作的时候,容易引起操作判断错误。

<style type="text/css">
#testdiv{color:red;font-size:15px;}
</style>
<div>div</div>
<div id="testdiv">带ID的DIV</div>

包含选择符

包含选择符很多人称它为派生选择符或者后代选择符,因为该选择符类型是作用于某个元素中的子元素的。例如,我们需要为DIV标签里面的SPAN定义样式:可以这样做:

<style type="text/css">
div span{font-size:30px;}
</style>
<div>
    div
    <span>span</span>
</div>
<span>span2</span>

div里面的span样式已经改变了。而下面的span则没有任何变化 ,因为定义的样式不起作用。

还要说一下,包含选择符不只限用于两层,可以多层嵌套。

<style type="text/css">
div span p{font-size:30px;}
</style>
<div>
    div
    <span>span<p>简明现代魔法</p></span>
</div>

其实"div span p"跟 div p效果在这边是一样的。但两者是有区别的,前者是对div下面的span下面的P设置 样式 而后者只是 对div下面的p设置标记。

接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而 大多数从事这方面工作的技术人员,多数时候还是主要考虑占据着浏览器市场大半壁江山的IE6,于是对这些IE6的非亲派不熟悉也成了一个没办法的必然。

在IE7,IE8,甚至是即将出来的IE9,Firefox,Opera,Safari等慢慢蚕食IE6市场的今天,那些以往不大常用的选择符也逐渐开始被应用起来。

不过最近有个好消息“IE6已被微软宣判死刑 但谁能为它送葬? ”!嗯,也该死了。哈哈。

子选择符

子选择符也可以称为子对象选择符,主要作用是定义子元素对象的样式,无法定义子元素以外的对象。选择符与选择符之间必须存在“>”符号才是子选择符。

例如,需要给body下面的子元素strong标签定义样式,即body>strong{.....}

<style type="text/css">
body>strong
{
    color:red;
    font-size:18px;
    text-decoration:underline;
}
</style>
<body>
<p>嗯,P标记<strong>p标记下面的strong标记<span>p下面的strong下面的span</span></strong></p>
<strong>嗯,strong标记</strong>
</body>

为什么在页面中第一个strong没有应用到样式呢?这就是子选择符的魅力,第一个strong与body的关系是body>p>strong,而不是body>strong。

嗯,对了。子选择符在IE7以下的浏览器里面是不被支持的。你用IE6测的话,死也测不出效果来。

相邻选择符

相邻选择符与子选择符很相似,只是将中间的“>”换成了“+”但是在功能上却差了不止一点。它的主要作用是:匹配同一个父级下某个元素之后的元素,例如,定义与P标签相邻的strong标签,就可以这么写:

<style type="text/css">
    p+strong
    {
        color:Blue;
        text-decoration:underline;
    }
    </style>
    <p>p标记<strong>p下面的strong<span>p>strong>span</span></strong></p>
    <strong>strong是body的子元素也是p的相邻元素</strong>

是不是有见过的感觉呢。是的。子选择符中body>strong也可以实现同样的效果。

大家可以动手写写,分别使用子选择符和相邻选择符。

HTML 如下:

<p>CSS很强大,<strong>可以控制页面<span>任何元素</span>的样式</strong ></p>
<strong>与世界同步,做一个成功的页面仔</strong>
<strong>让我们看看CSS的世界是多么奇妙吧!</strong>

下面我首先用子选择符来定义strong的样式,大家看看效果:

<style type="text/css">
body > strong {
    color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/
    font-size:18px; /*定义文字大小为18px*/
    text-decoration:underline; /*定义文字具有下划线*/
}
</style>

可以看见两个strong都改变了。因为这两个strong都是body的子元素。

这会再利用相信选择符定义strong的样式,大家这会可以先猜猜是什么效果。

<style type="text/css">
p + strong {
    color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/
    font-size:18px; /*定义文字大小为18px*/
    text-decoration:underline; /*定义文字具有下划线*/
}
</style>

效果我就不发图了:只有P后面的第一个strong改变了。这样一对比,大家都明白其区别了吧。

属性选择符

任何一个HTML标签都会有属性存在,而且每个属性都具有属性值。

例如img标签:

<img src="http://www.nowamagic.net/images/logo.gif" alt="nowamagic的LOGO" />

代码中src,alt都是img标签的属性,引号中的内容分别为它们的属性值。每个属性都必须带有属性值。

了解了HTML标签具有属性的特性后,这会来介绍如何利用属性选择符对标签进行样式定义。

属性选择符的格式是标签元素后紧跟一对中括号,中括号里的内容是该标签元素的属性或表达式。

属性选择符可分为4种模式:

  • E[attr]
  • E[attr="value"]
  • E[attr~="value"]
  • E[attr|="value"]

E代表任何一个HTML标签,attr代表E标签的任意一个属性,value代表这个属性的值。

  1. E[attr]将匹配具有attr属性的E标签元素,忽略其属性值。
  2. 例如:我们想要把页面中所有带ID的属性的标签都定义样式。可以这样写:

    <style type="text/css">
          *[id]{color:Red;}
    </style>
          <span id="span1">span有ID</span>
          <p>p</p>
          <h1 id="h">h1有ID</h1>
          <h3>h3</h1>
          <h2>h2</h1>
    

    效果大家可能也猜到了span标签和h1标签全部为红色显示。

  3. E[attr="value"]匹配具有“attr”属性且属性值为“value” 的E标签元素。
  4. 例如我这里要定义type属性值为text的input标签的样式。

    则可以这样写:

    <style type="text/css">
     input[type="text"]
       {
           color:Blue;
       }
    </style>
    <input type="text" value="My God" />
    
  5. E[attr~=value]匹配具有attr属性且其中值包含value的E元素。注意了值之间要有空格隔开。
  6. <style type="text/css">
      span[title~="rutongnet"]
      {text-decoration:underline;}
    </style>
    <span title="rutongnet css">title属性值为rutongnet css的span标签</span>
    
  7. E[attr|=value]匹配具有attr属性且属性值必须是以 value 开始及使用连字符(-) 分隔的E标签。
  8. <style type="text/css">
      p[title|="rutongnet"]
      {
          text-decoration:underline;
          color:Aqua;
      }
    </style>  
    <p title="rutongnet css">title属性值为rutongnet css的p标签</p>//没有连字符所以不匹配
    <p title="css rutongnet">title属性值为css rutongnet的p标签</p>//不匹配,其以CSS开头
    <p title="rutongnet+css">title属性值为rutongnet+css的p标签</p>//不匹配,其未使用连字符
    <p title="rutongnet-css">title属性值为rutongnet-css的p标签</p>//匹配成功
    <p title="rutongnetcss">title属性值为rutongnetcss的p标签</p>//不匹配未使用连字符
    

本文地址:http://www.nowamagic.net/librarys/veda/detail/675,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/675

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《代码大全(第2版)》 史蒂夫•迈克康奈尔 (Steve McConnell) (作者), 金戈 (译者)

代码大全(第2版)是著名IT畅销书作者、《IEEE Software》杂志前主编、具有20年编程与项目管理经验的Steve McConnell十余年前的经典著作的全新演绎:第2版做了全面的更新,增加了很多与时俱进的内容,包括对新语言、新的开发过程与方法论的讨论等等。这是一本百科全书式的软件构建手册,涵盖了软件构建活动的方方面面,尤其强调提高软件质量的种种实践方法。

更多计算机宝库...