《Web前端开发》课程理论教学部分 第十一讲:选择器 学时计划:2学时理论,0学时实验 (无实验教学内容) 教学大纲: 1、认识选择器 2、基本选择器 3、属性选择器 4、结构性伪类选择器 5、UI元素状态伪类选择器 6、案例:数据表格 7、讨论与思考 选择器是CSS的重要内容。通过选择器的使用,在标签中指定特 定的HTML元素而不必使用多余的 class、ID,从而实现轻量级的标 签书写以及结构与表现更好的分离。CSS中的选择器大部分并不是 CSS3中新添加的,而是没有被得到应有的广泛应用 本讲详细介绍CSS的选择器,并通过案例展示选择器的使用方法 以及通过选择器如何提高页面的简洁性,从而让读者体会到选择器的 重要价值和意义。 认识选择器 选择器是CSS的重要内容,使用选择器可以大幅度的提高开发人 员在书写或修改页面样式是的效率,并使得页面更加简洁和易于阅读。 选择器主要是用来确定HTML的树形结构中的DOM元素节点。在 CSS3中提倡使用选择器来讲样式与元素直接绑定起来,使得样式表 中的样式定义和页面中的元素相匹配起来。通过选择器,还可以实现 各种复杂的指定,同时能大量减少样式表的代码书写量。 CSS选择器分为三部分 第一部分是常用的部分,叫做基本选择器; 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs.51xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第十一讲：选择器 学时计划：2 学时 理论，0 学时 实验 （无实验教学内容） 教学大纲： 1、认识选择器 2、基本选择器 3、属性选择器 4、结构性伪类选择器 5、UI 元素状态伪类选择器 6、案例：数据表格 7、讨论与思考 选择器是 CSS 的重要内容。通过选择器的使用，在标签中指定特 定的 HTML 元素而不必使用多余的 class、ID，从而实现轻量级的标 签书写以及结构与表现更好的分离。CSS 中的选择器大部分并不是 CSS 3 中新添加的，而是没有被得到应有的广泛应用。 本讲详细介绍 CSS 的选择器，并通过案例展示选择器的使用方法 以及通过选择器如何提高页面的简洁性，从而让读者体会到选择器的 重要价值和意义。 一、认识选择器 选择器是 CSS 的重要内容，使用选择器可以大幅度的提高开发人 员在书写或修改页面样式是的效率，并使得页面更加简洁和易于阅读。 选择器主要是用来确定 HTML 的树形结构中的 DOM 元素节点。在 CSS 3 中提倡使用选择器来讲样式与元素直接绑定起来，使得样式表 中的样式定义和页面中的元素相匹配起来。通过选择器，还可以实现 各种复杂的指定，同时能大量减少样式表的代码书写量。 CSS 选择器分为三部分： 第一部分是常用的部分，叫做基本选择器；
第二部分是属性选择器; 第三部分是伪类选择器 基本选择器 通配符选择器 通配符选择器是用来选择所有元素,也可以选择某个元素下的所 有元素 案例 示例11-1:通配符选择器 shtn,ype html> 通配符选择器 padding border: 1px solid #F00 <>1<> 2 4 5 7 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 第二部分是属性选择器； 第三部分是伪类选择器。 二、基本选择器 2.1 通配符选择器 通配符选择器是用来选择所有元素，也可以选择某个元素下的所 有元素。 案例： 示例 11-1：通配符选择器 通配符选择器 * { margin:3px; padding:0px; border:1px solid #F00; } 1 2 3 4 5 6 7 8
2.2元素选择器(E) 元素选择器,是CSS选择器中最常见而且最基本的选择器。元素 选择器其实就是对文档的元素进行样式定义,如htm1,body,p,div等 定义样式。 案例: 示例11-2:元素选择器 tte>元素选择器 margin: 10px padding: 5px width: 18px; font-size: 13p color: #FFF border-radius: 5px border: 1 px solid #FoO background-color: #F90 list-style: none 2 3 i>5 i>6 8 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.2 元素选择器(E) 元素选择器，是 CSS 选择器中最常见而且最基本的选择器。元素 选择器其实就是对文档的元素进行样式定义，如 html,body,p,div 等 定义样式。 案例： 示例 11-2：元素选择器 元素选择器 li { margin:10px; padding:5px; width:18px; font-size:13px; color:#FFF; text-align:center; border-radius:5px; border:1px solid #F00; background-color: #F90; float:left; list-style:none; } 1 2 3 4 5 6 7 8
2.3类选择器(. className) 类选择器是以一独立于文档元素的方式来指定样式,使用类选择 器之前需要在htm1元素上定义类名,换句话说需要保证类名在html 标记中存在,这样才能选择类。 类选择器还可以结合元素选择器来使用,比如说,文档中有多个 元素使用了类名“ Items”,但是只需要在使用了类型“ 1 tems”的p 元素上修改样式,则可以将类名称定义为“p. ltems”。 也可以为一个元素定义多个名称,从而实现多个类共同对单一元 素起作用。 案例 示例11-3:类选择器 tte>类选择器 <bod 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.3 类选择器（.className） 类选择器是以一独立于文档元素的方式来指定样式，使用类选择 器之前需要在 html 元素上定义类名，换句话说需要保证类名在 html 标记中存在，这样才能选择类。 类选择器还可以结合元素选择器来使用，比如说，文档中有多个 元素使用了类名“items”，但是只需要在使用了类型“items”的 p 元素上修改样式，则可以将类名称定义为“p.items”。 也可以为一个元素定义多个名称，从而实现多个类共同对单一元 素起作用。 案例： 示例 11-3：类选择器 类选择器 li { margin:10px; padding:5px; width:18px; font-size:13px; color:#FFF; text-align:center; border-radius:5px; border:1px solid #F00; background-color: #F90; float:left; list-style:none; } .ButtonNow { font-weight:bold; background-color:#FF0; border:1px solid #F00; color:#F00; }
i>1 2 3 4 i>5 6 7 2.4ID选择器(#ID) ID选择器和类选择器是很相似的,在使用ID选择器之前也需要 先在htm1文档中加注ID名称,这样在样式选择器中才能找到相对应 的元素。与类选择器不同的是,ID选择器是一个页面中唯一的值 在定义类时在相对应的类名前加上一个“.”号(. className), 而在定义ID选择器时则是在名称前使用"#"号(#id)。 粲例 例11-4:ID选择器 ≤htm> shead tte>|D选择器 margin: 10px dding: 5px font-size: 13px color: #FFF: text-align: center: border-radius 5px border: 1px solid #FoO background-color: #F90 float: left 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1 2 3 4 5 6 7 8 2.4ID 选择器（#ID） ID 选择器和类选择器是很相似的，在使用 ID 选择器之前也需要 先在 html 文档中加注 ID 名称，这样在样式选择器中才能找到相对应 的元素。与类选择器不同的是，ID 选择器是一个页面中唯一的值。 在定义类时在相对应的类名前加上一个“.”号（.className）， 而在定义 ID 选择器时则是在名称前使用"#"号（#id）。 案例： 示例 11-4：ID 选择器 ID 选择器 li { margin:10px; padding:5px; width:18px; font-size:13px; color:#FFF; text-align:center; border-radius:5px; border:1px solid #F00; background-color: #F90; float:left; list-style:none;
#ButtonNow i font-weight: bold; background-color: #FFO border: 1px solid #FoO color: #Fo0 1 3 4 i>5 i>6 2.5后代选择器(EF) 后代选择器也被称作包含选择器,就是可以选择某元素的后代元 比如说EF,前面E为祖先元素,F为后代元素。所表达的意思 就是选择了E元素的所有后代F元素。请注意祖先元素和后代元素之 间使用一个空格隔开。这里F不管是E元素的子元素或者是孙元素或 者是更深层次的关系,都将被选中。也就是说,EF将递归选中E元 素中的所有F元素。 2.6子元素选择器(E>F) 子元素选择器只能选择某元素的子元素。 比如说EF,其中E为父元素,而F为子元素,其中E>F所表示 的是选择了E元素下的所有子元素F。和后代选择器(EF)不同, 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn } #ButtonNow { font-weight:bold; background-color:#FF0; border:1px solid #F00; color:#F00; } 1 2 3 4 5 6 7 8 2.5 后代选择器（E F） 后代选择器也被称作包含选择器，就是可以选择某元素的后代元 素。 比如说 E F，前面 E 为祖先元素，F 为后代元素。所表达的意思 就是选择了 E 元素的所有后代 F 元素。请注意祖先元素和后代元素之 间使用一个空格隔开。这里 F 不管是 E 元素的子元素或者是孙元素或 者是更深层次的关系，都将被选中。也就是说，E F 将递归选中 E 元 素中的所有 F 元素。 2.6 子元素选择器（E>F） 子元素选择器只能选择某元素的子元素。 比如说 E>F，其中 E 为父元素，而 F 为子元素，其中 E>F 所表示 的是选择了 E 元素下的所有子元素 F。和后代选择器（E F）不同
E>F仅选择了E元素的F子元素,而不是递归查询。 案例: 例11-5:后代选择器与子选择器 ≤htm> shead> 后代选择器与子选择器 border: 1 px dashed #333333 nav>p( font-size: 1 6px color: #FOO div li( border: 1 px dashed #333333 1 2 3 4 i>5 6 7 >8 网站首页 联系我们 1 2 3 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn E>F 仅选择了 E 元素的 F 子元素，而不是递归查询。 案例： 示例 11-5：后代选择器与子选择器 后代选择器与子选择器 nav>li { border:1px dashed #333333; } nav>p { font-size:16px; color:#F00; } div li { border:1px dashed #333333; } 1 2 3 4 5 6 7 8 网站首页 联系我们 1 2 3
4 6 7 2.7相邻兄弟元素选择器(E+F) 相邻兄弟选择器可以选择紧接在另一元素后的元素,而且具有 个相同的父元素。 比如E+F,E和F元素具有一个相同的父元素,而且F元素在E 元素后面且紧相邻,这样就可以使用相邻兄弟元素选择器来选择F元 素 2.8通用兄弟选择器(EF) 通用兄弟元素选择器是CSS3新增的选择器,将选择某元素后面 的所有兄弟元素,通用兄弟元素需要在同一个父元素之中。 比如EF,E和F元素是属于同一父元素之内,并且F元素在E 元素之后,那么EF选择器将选择中所有E元素后面的所有F元素。 通用兄弟选择器和相邻兄弟选择器极其相似,不同的是,相邻兄 弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元 素);而通用兄弟元素选择器,选中的是元素后面的所有兄弟元素。 案例: 示例11-6:兄弟选择器 兄弟选择器选择器 font-size: 12px 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 4 5 6 7 8 2.7 相邻兄弟元素选择器（E+F） 相邻兄弟选择器可以选择紧接在另一元素后的元素，而且具有一 个相同的父元素。 比如 E+F，E 和 F 元素具有一个相同的父元素，而且 F 元素在Ｅ 元素后面且紧相邻，这样就可以使用相邻兄弟元素选择器来选择 F 元 素。 2.8 通用兄弟选择器（E~F） 通用兄弟元素选择器是 CSS 3 新增的选择器，将选择某元素后面 的所有兄弟元素，通用兄弟元素需要在同一个父元素之中。 比如 E~F，E 和 F 元素是属于同一父元素之内，并且 F 元素在 E 元素之后，那么 E~F 选择器将选择中所有 E 元素后面的所有 F 元素。 通用兄弟选择器和相邻兄弟选择器极其相似，不同的是，相邻兄 弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元 素）；而通用兄弟元素选择器，选中的是元素后面的所有兄弟元素。 案例： 示例 11-6：兄弟选择器 兄弟选择器选择器 li { margin:10px; font-size:12px; width:24px;
height: 18px padding-top: 5px; text-align center border: 1 px solid #999 background- color: #CCC border-radius: 15px list-style: none float: left: nav( width: 408px; 1 First + li border: 1px solid #FoO background-color: #FCO color: #F00: font-weight: bold border: 1 px solid #FoO background-color: #FC0 color: #FOO font-weight: bold 1 2 3 5 8 1 2 3 4 5</i 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn height:18px; padding-top:5px; text-align:center; border:1px solid #999; background-color:#CCC; border-radius:15px; list-style:none; float:left; } nav{ width:408px;} .First + li { border:1px solid #F00; background-color:#FC0; color:#F00; font-weight:bold; } .Second ~ li { border:1px solid #F00; background-color:#FC0; color:#F00; font-weight:bold; } 1 2 3 4 5 6 7 8 1 2 3 4 5
7 2.9群组选择器( selector1, selector2,, selector) 群组选择器是将具有相同样式的元素分组在一起,每个选择器之 间使用逗号“,”隔开。 属性选择器 在HIML中,通过各种各样的属性,可以给元素增加许多附加信 息。这样就可以通过属性的不同,指定具有特定属性的元素。 属性选择器在CSS2中就被引入,其主要作用是对带有指定属性 的HTML元素设置样式。使用CSS3属性选择器,可以只指定元素的 某个属性,也可以同时指定元素的某个属性和其对应的属性值。 3. lELattrl E[attr]属性选择器是CSS3属性选择器中最简单的一种。 如果希望选择有某个属性的元素,而不论这个属性值是什么,就 可以使用此属性选择器。 属性选择器可以指定一个属性,也可以指定多个属性。 案例 示例11-7:不指定属性值的选择器 不指定属性值的属性选择器 font-size: 12px color: #Co0 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 6 7 8 2.9 群组选择器（selector1,selector2,...,selectorN） 群组选择器是将具有相同样式的元素分组在一起，每个选择器之 间使用逗号“，”隔开。 三、属性选择器 在 HTML 中，通过各种各样的属性，可以给元素增加许多附加信 息。这样就可以通过属性的不同，指定具有特定属性的元素。 属性选择器在 CSS 2 中就被引入，其主要作用是对带有指定属性 的 HTML 元素设置样式。使用 CSS 3 属性选择器，可以只指定元素的 某个属性，也可以同时指定元素的某个属性和其对应的属性值。 3.1E[attr] E[attr]属性选择器是 CSS 3 属性选择器中最简单的一种。 如果希望选择有某个属性的元素，而不论这个属性值是什么，就 可以使用此属性选择器。 属性选择器可以指定一个属性，也可以指定多个属性。 案例： 示例 11-7：不指定属性值的选择器 不指定属性值的属性选择器 [id] { font-size:12px; color:#C00; }