选择器概述
选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中,提倡使用选择器来将样式与元素直接 绑定真情为,这样,在样式表中什么样式与什么元素相匹配变得一目了然,修改起来也方便。不仅如此,通过选择器,我们还可以实现各种复杂的指定,同时也能大 量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。
CSS3中的属性选择器
- [attr=val]属性选择器的含义是:如果元素用attr表示的属性之属性值为val指定的字符,则该元素使用这个样式。
- [attr*=val]属性选择器的含义是:如果元素用attr表示的属性之属性值包含val指定的字符,则该元素使用这个样式。
- [attr^=val]属性选择器的含义是:如果元素用attr表示的属性之属性值以val指定的字符开始,则该元素使用这个样式。
- [attr$=val]属性选择器的含义是:如果元素用attr表示的属性之属性值以val指定的字符结尾,则该元素使用这个样式。
结构性伪类选择器
CSS中的伪类选择器
伪类选择器与类选择器的区别是,类选择器可以随便起名,但是伪类选择器是CSS中已经定义好的选择器,不能随便起名。在CSS中最常用的伪类选择器是使用在a(锚)元素上的几种选择器,使用方法如下所示:
a:link {color:#FF0000; text-decoration:none;} a:visited {color:#00FF00; text-decoration:none;} a:hover {color:#FF00FF; text-decoration:underline;} a:active {color:#0000FF; text-decoration:underline;}
CSS中的伪元素选择器
所谓伪元素选择器,是指并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器。在CSS中主要有如下四类伪元素选择器:
- first-line伪元素选择器:用于为某个元素中的第一行文字使用样式;
- first-letter伪元素选择器:用于为某个元素中的文字的首字母(欧美文字)或第一个字使用样式;
- before伪元素选择器:用于在某个元素之前插入一些内容;
- after伪元素选择器:用于在某个元素之后插入一些内容。
结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
选择器root、not、empty和target
root选择器将样式绑定到页面的根元素。所谓根元素,是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含着整个页面 的<html>部分。另外,在使用样式指定root元素与body元素的背景时,根据不同的指定条件,背景色的显示范围会有所变化,这一点请 注意。
如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,可以使用not选择器。例如:我们可以使用“body *”来指定body元素的背景色为黄色,但是排除h1元素使用这个背景色,则CSS样式定义如下:
<style type="text/css"> :root {background-color:yellow;} body *:not(h1) {background-color:yellow;} :empty {background-color:red;} :target {background-color:green;} </style>
使用empty选择器来指定当元素内容为空白时使用的样式。
使用target选择器来对页面中某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
选择器first-child、last-child、nth-child和nth-last-child
这几个选择器能够特殊针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素、偶数个或奇数个子元素进行样式的指定。
单独指定第一个子元素、最后一个子元素的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>first-child与last-child选择器示例</title> <style type="text/css"> li:first-child {background-color: yellow;} li:last-child {background-color: skyblue;} </style> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> </body> </html>
对指定序号的子元素使用样式
使用nth-child选择器和nth-last-child选择器,不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式,还可以针对父元素中某个指定序号的子元素来指定样式,其使用方法如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>nth-child与nth-last-child选择器示例</title> <style type="text/css"> li:nth-child(2) {background-color: yellow;} li:nth-last-child(2) {background-color: skyblue;} </style> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> </body> </html>
该示例中,指定ul列表中第二个li列表项的背景色为黄色,倒数第二个li列表项的背景色为浅蓝色。
对所有奇数或偶数个元素使用样式
这两个选择器还可以用来对某个父元素中所有奇数(odd)或偶数(even)个子元素使用样式,使用方式如下所示:
<style type="text/css"> li:nth-child(odd) {background-color: yellow;} li:nth-child(even) {background-color: skyblue;} </style>
注意:nth-child和nth-last-child选择器是针对父元素中所有子元素的排列来计算序号的 ,即有可能父元素中包含不止一种类型的子元素时,而你要对某一类子元素进行奇偶数元素进行样式指定时不能使用该选择器,应该使用下面两种选择。
选择器nth-of-type和nth-last-of-type
在CSS3中,可以使用这两个选择器来解决上述注意事项中所说明的问题。使用这两个选择器时,CSS3在计算子元素是排号为奇数或偶数时,就只针对同类型的子元素进行计算了,使用方法如下所示:
<style type="text/css"> h2:nth-of-type(odd) {background-color: yellow;} h2:nth-of-type(even) {background-color: skyblue;} </style>
另外,如果计算奇偶数的时候需要从下往上倒过来计算,则使用nth-last-type选择器进行计算。
循环使用样式
如果开发者想对所有的列表项目都设定背景色,但是不采用一个个列表项分别指定的方式,而是采用循环指定的方式,让剩下来的列表项循环采用一开始已经 指定好的背景色,这时仍然可以采用nth-child选择器,只要使用“nth-child(xn+y)”的形式即可。其中“x”表示每次循环中共包括几种样式,“y”表示指定的样式在循环中所处的位置,使用方法如下所示:
<style type="text/css"> li:nth-child(4n+1) {background-color: yellow;} li:nth-child(4n+2) {background-color: limegreen;} li:nth-child(4n+3) {background-color: red;} li:nth-child(4n+4) {background-color: white;} </style>
另外,“4n+4” 的写法可略写成“4n”的形式。上述四个选择器均支持这种应用。
only-child和only-of-type选择器
如果采用如下所示的方法结合运用nth-child与nth-last-child选择器,可以指定当某个父元素中只有一个子元素时才使用的样式。
<!DOCTYPE html> <html> <meta charset="UTF-8"/> <title>only-child选择器</title> <style type="text/css"> li:nth-child(1):nth-last-child(1) {background-color: red;} </style> </html> <body> <ul> <li>只有一个列表项</li> </ul> </body> </thml>
上述示例中的CSS样式可以修改成如下样式:
<style type="text/css"> li:only-child {background-color: red;} </style>
另外,也可使用only-of-type选择器替代“nth-of-type(1):nth-last-of-type(1)”这种结合两个选择器表达式格式来让让样式只对唯一子元素起作用的实现方法。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1673绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1051UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1286绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1379使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1457canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1462CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5405Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4607基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4053基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1974基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1817applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1517离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2553本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1563Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1213video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1717音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 896video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4932在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4966在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
CSS3选择器教辅.pdf
CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。
前端必须掌握30个CSS3选择器.
CSS3选择器(ppt).pdf
理解css属性选择器
React组件的css选择器
CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值,并显示最近使用的颜色的列表。 默认情况下,颜色选取器将输入...
包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况
使用HTML+css3写的城市选择器。实现了城市多选了单选功能。支持最多选择三个城市。 适合下载下来作为一个参考的demo。
里面不仅包含了css3的所有选择器,还有css2的各种版本以及对比。
CSS属性选择器详解.pdf
css3属性选择器,背景缩写 css3属性选择器,背景缩写 css3属性选择器,背景缩写
IE-Css3.Js 让IE支持CSS3 选择器的插件。
在定义CSS时,需要知道其书写语法和影响范围,此文档给你说明
基本涵盖了CSS 2和CSS 3的所有规定。
CSS选择器-.pdf
CSS3并不是一门语言,我们知道css是层叠样式表,是一种样式语言,是用来告诉浏览器如何渲染页面的。css3是css规范的最新版本,在css2.1上增加了很多强大的新功能,用来帮助开发人员解决一些问题。