CSS强大的选择器利器
2011-08-02 00:00
2106 查看
一般没有系统的学习过,只是在网上看一些片断教程的人。见到最多的可能也就是:
元素选择符(例如:body 、a 、li )
ID选择符(例如:#head、#body、#foot)
类选择符(例如:.red、.item、.content)
今天我们把所有的选择符统统拿出来说个遍。
在有些情况下,可以对特定元素的所有后代元素(后代元素其实就类似是子元素<p>pppp<strong>strong</strong></p>,strong就是P的后代元素)应用样式。例如,将页面中h1标签所包含的所有后代元素的字体设置为***,例如:
最后关于通配符还有一点想说的就是,效率的问题。通配符把所有标签都要初始化一遍,浏览器的渲染消耗一定的资源。但是我在想,对于这点资源,除非是那种对性能要求极高,否则我认为没必要太刻意在乎,毕竟还是很方便吗!
类这个概念可能我们大家在C#编程中都接触过,这里提的类选择器其实跟C#中的类是差不多的概念,目的就是体现复用性。减少相同的样式定义多次。
这边我让所有div标签下的文字14px大小带下划线红色文字。
现在想一下如何让第三个DIV变为18px的字体。
类选择器在CSS中必须以“.”作为前缀,后面紧跟一个定义的类名。这样只要类是“div3”的DIV都以18PX字体显示从而达到了复用的效果了。
div里面的span样式已经改变了。而下面的span则没有任何变化 ,因为定义的样式不起作用。
还要说一下,包含选择符不只限用于两层,可以多层嵌套。
其实"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{.....}
为什么在页面中第一个strong没有应用到样式呢?这就是子选择符的魅力,第一个strong与body的关系是body>p>strong,而不是body>strong。
嗯,对了。子选择符在IE7以下的浏览器里面是不被支持的。你用IE6测的话,死也测不出效果来。
是不是有见过的感觉呢。是的。子选择符中body>strong也可以实现同样的效果。
大家可以动手写写,分别使用子选择符和相邻选择符。
HTML 如下:
下面我首先用子选择符来定义strong的样式,大家看看效果:
可以看见两个strong都改变了。因为这两个strong都是body的子元素。
这会再利用相信选择符定义strong的样式,大家这会可以先猜猜是什么效果。
效果我就不发图了:只有P后面的第一个strong改变了。这样一对比,大家都明白其区别了吧。
例如img标签:
代码中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的属性的标签都定义样式。可以这样写:
效果大家可能也猜到了span标签和h1标签全部为红色显示。
E[attr="value"]匹配具有“attr”属性且属性值为“value” 的E标签元素。
例如我这里要定义type属性值为text的input标签的样式。
则可以这样写:
E[attr~=value]匹配具有attr属性且其中值包含value的E元素。注意了值之间要有空格隔开。
E[attr|=value]匹配具有attr属性且属性值必须是以 value 开始及使用连字符(-) 分隔的E标签。
元素选择符(例如: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之旅——第三站 强大的伪选择器
- CSS之旅——第三站 强大的伪选择器
- css 各种 选择器
- CSS中奇数选择器与偶数选择器,一句代码怎么实现?
- 深入理解CSS中选择器的逻辑处理
- CSS 选择器学习小记
- CSS学习02-选择器
- vue 自定义样式 深度选择器 作用域CSS
- CSS 类选择器
- 【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
- 强大的jQuery选择器 平时用的太少了 下次要先来看看
- CSS选择器详解(二)通用选择器和高级选择器
- 第七节 CSS学习——属性选择器
- css基础-html中使用css、基本选择器、类选择器、id选择器、通用选择器、符合选择器、css权重
- CSS学习笔记----选择器与字体(字系)
- [你必须知道的css系列]第一回:丰富的利器终结篇:选择符的组合关系及选择符总结
- css 权威指南笔记(四)选择器
- 原生的强大DOM选择器querySelector
- 几个必须掌握的css概念:重用、子选择器和组选择器
- 使用CSS3层选择器