《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> <ldoct <meta charset="utf-8 <te>通配符选择器<rite> <style type="text/css"> padding border: 1px solid #F00 <>1<> <i>2</i> <li>4</i> <i>5</i> <i>7<li> 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 第二部分是属性选择器； 第三部分是伪类选择器。 二、基本选择器 2.1 通配符选择器 通配符选择器是用来选择所有元素，也可以选择某个元素下的所 有元素。 案例： 示例 11-1：通配符选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>通配符选择器</title> <style type="text/css"> * { margin:3px; padding:0px; border:1px solid #F00; } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html>
2.2元素选择器(E) 元素选择器,是CSS选择器中最常见而且最基本的选择器。元素 选择器其实就是对文档的元素进行样式定义,如htm1,body,p,div等 定义样式。 案例: 示例11-2:元素选择器 <doctype html> <html> <meta charset="utf-8> tte>元素选择器<itle> <style type="text/css"> 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 <u> <i>2</i> <li>3</i> i>5</i> i>6</i> <i>8</i </u </dv> </body </html> 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.2 元素选择器(E) 元素选择器，是 CSS 选择器中最常见而且最基本的选择器。元素 选择器其实就是对文档的元素进行样式定义，如 html,body,p,div 等 定义样式。 案例： 示例 11-2：元素选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style type="text/css"> 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; } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html>
2.3类选择器(. className) 类选择器是以一独立于文档元素的方式来指定样式,使用类选择 器之前需要在htm1元素上定义类名,换句话说需要保证类名在html 标记中存在,这样才能选择类。 类选择器还可以结合元素选择器来使用,比如说,文档中有多个 元素使用了类名“ Items”,但是只需要在使用了类型“ 1 tems”的p 元素上修改样式,则可以将类名称定义为“p. ltems”。 也可以为一个元素定义多个名称,从而实现多个类共同对单一元 素起作用。 案例 示例11-3:类选择器 <doctype html> <html> <meta charset="utf-8> tte>类选择器</ttle tyle typ margin: 10px padding: 5px width: 18px; font-size: 13p color: #FFF border-radius: 5px border: 1 px solid #FoO background-color: #F90 float: left list-style: none ButtonNow t font-weight: bold background-color #FFO border: 1px solid #FoO color: #FOO </style> </head> <bod 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.3 类选择器（.className） 类选择器是以一独立于文档元素的方式来指定样式，使用类选择 器之前需要在 html 元素上定义类名，换句话说需要保证类名在 html 标记中存在，这样才能选择类。 类选择器还可以结合元素选择器来使用，比如说，文档中有多个 元素使用了类名“items”，但是只需要在使用了类型“items”的 p 元素上修改样式，则可以将类名称定义为“p.items”。 也可以为一个元素定义多个名称，从而实现多个类共同对单一元 素起作用。 案例： 示例 11-3：类选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style type="text/css"> 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; } </style> </head> <body>
<u> i>1</i> <i>2</i> <li class="Button Now >3</i> <i>4</i> i>5</i> <i>6</i> <i>7 </u </html> 2.4ID选择器(#ID) ID选择器和类选择器是很相似的,在使用ID选择器之前也需要 先在htm1文档中加注ID名称,这样在样式选择器中才能找到相对应 的元素。与类选择器不同的是,ID选择器是一个页面中唯一的值 在定义类时在相对应的类名前加上一个“.”号(. className), 而在定义ID选择器时则是在名称前使用"#"号(#id)。 粲例 例11-4:ID选择器 <!doctype htmI> ≤htm> shead <meta charset="utf-8> tte>|D选择器</ite <style type="text/css"> 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 <div> <ul> <li>1</li> <li>2</li> <li class="ButtonNow">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html> 2.4ID 选择器（#ID） ID 选择器和类选择器是很相似的，在使用 ID 选择器之前也需要 先在 html 文档中加注 ID 名称，这样在样式选择器中才能找到相对应 的元素。与类选择器不同的是，ID 选择器是一个页面中唯一的值。 在定义类时在相对应的类名前加上一个“.”号（.className）， 而在定义 ID 选择器时则是在名称前使用"#"号（#id）。 案例： 示例 11-4：ID 选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ID 选择器</title> <style type="text/css"> 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;