#ButtonNow i font-weight: bold; background-color: #FFO border: 1px solid #FoO color: #Fo0 <u> <li>1</i> <li id="Button Now >3</i> <i>4</i> i>5</i> i>6</i> 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; } </style> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li id="ButtonNow">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html> 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:后代选择器与子选择器 <!doctype html> ≤htm> shead> <meta charset="utf-8> <title>后代选择器与子选择器</ttle <style type="text/css"> border: 1 px dashed #333333 nav>p( font-size: 1 6px color: #FOO div li( border: 1 px dashed #333333 </style <i>1</i> <i>2</i> <i>3</i> <i>4</i> i>5</i> <i>6</i> <i>7</i> >8< </u|> <p>网站首页<p> <p>联系我们<p> <i>1</i> <i>2</i> <i>3</i> 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xuewebcn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn E>F 仅选择了 E 元素的 F 子元素，而不是递归查询。 案例： 示例 11-5：后代选择器与子选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>后代选择器与子选择器</title> <style type="text/css"> nav>li { border:1px dashed #333333; } nav>p { font-size:16px; color:#F00; } div li { border:1px dashed #333333; } </style> </head> <body> <nav> <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> </nav> <nav> <p>网站首页</p> <p>联系我们</p> </nav> <div> <ul> <li>1</li> <li>2</li> <li>3</li>
<i>4</i> <i>6</i> <i>7</i> </u </html> 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:兄弟选择器 <!doctype html> <meta charset"utf-8"> <tte>兄弟选择器选择器</tile <style type="text/css"> font-size: 12px 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html> 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：兄弟选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>兄弟选择器选择器</title> <style type="text/css"> 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 <u> <i>1</i> <li class="First" >2</i> <li>3</i> <i>5</i> <i>8</i </u uI> <li>1</i> <li class="Second>2</i> <li>3</i> <i>4</i> <i>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; } </style> </head> <body> <nav> <ul> <li>1</li> <li class="First">2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </nav> <nav> <ul> <li>1</li> <li class="Second">2</li> <li>3</li> <li>4</li> <li>5</li>
<i>7</i> </u </nay> </html> 2.9群组选择器( selector1, selector2,, selector) 群组选择器是将具有相同样式的元素分组在一起,每个选择器之 间使用逗号“,”隔开。 属性选择器 在HIML中,通过各种各样的属性,可以给元素增加许多附加信 息。这样就可以通过属性的不同,指定具有特定属性的元素。 属性选择器在CSS2中就被引入,其主要作用是对带有指定属性 的HTML元素设置样式。使用CSS3属性选择器,可以只指定元素的 某个属性,也可以同时指定元素的某个属性和其对应的属性值。 3. lELattrl E[attr]属性选择器是CSS3属性选择器中最简单的一种。 如果希望选择有某个属性的元素,而不论这个属性值是什么,就 可以使用此属性选择器。 属性选择器可以指定一个属性,也可以指定多个属性。 案例 示例11-7:不指定属性值的选择器 <meta charset="utf-8> <ite>不指定属性值的属性选择器< /title> <style type="text/css"> font-size: 12px color: #Co0 </style> 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <li>6</li> <li>7</li> <li>8</li> </ul> </nav> </body> </html> 2.9 群组选择器（selector1,selector2,...,selectorN） 群组选择器是将具有相同样式的元素分组在一起，每个选择器之 间使用逗号“，”隔开。 三、属性选择器 在 HTML 中，通过各种各样的属性，可以给元素增加许多附加信 息。这样就可以通过属性的不同，指定具有特定属性的元素。 属性选择器在 CSS 2 中就被引入，其主要作用是对带有指定属性 的 HTML 元素设置样式。使用 CSS 3 属性选择器，可以只指定元素的 某个属性，也可以同时指定元素的某个属性和其对应的属性值。 3.1E[attr] E[attr]属性选择器是 CSS 3 属性选择器中最简单的一种。 如果希望选择有某个属性的元素，而不论这个属性值是什么，就 可以使用此属性选择器。 属性选择器可以指定一个属性，也可以指定多个属性。 案例： 示例 11-7：不指定属性值的选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>不指定属性值的属性选择器</title> <style type="text/css"> [id] { font-size:12px; color:#C00; } </style>