您的位置:首页 > Web前端 > CSS

CSS强大的选择器利器

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




元素选择符(例如: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代表这个属性的值。




E[attr]将匹配具有attr属性的E标签元素,忽略其属性值。


例如:我们想要把页面中所有带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标签全部为红色显示。


E[attr="value"]匹配具有“attr”属性且属性值为“value” 的E标签元素。


例如我这里要定义type属性值为text的input标签的样式。


则可以这样写:


<style type="text/css">
 input[type="text"]
   {
       color:Blue;
   }
</style>
<input type="text" value="My God" />


E[attr~=value]匹配具有attr属性且其中值包含value的E元素。注意了值之间要有空格隔开。


<style type="text/css">
  span[title~="rutongnet"]
  {text-decoration:underline;}
</style>
<span title="rutongnet css">title属性值为rutongnet css的span标签</span>


E[attr|=value]匹配具有attr属性且属性值必须是以 value 开始及使用连字符(-) 分隔的E标签。


<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>//不匹配未使用连字符
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS