</head> <header> <dvd="NeWs1">这是第一条新闻的标题<dv> < diy id="News1-c">这是第一条新闻的简介,主要说明了新闻内容。</div> <dvid="NeWs2">这是第二条新闻的标题</dv> < diy id="News2-c">这是第二条新闻的简介,主要说明了新闻内容。<div> <dvid="NeWs3">这是第三条新闻的标题</dv> < diy id="News3-c">这是第三条新闻的简介,主要说明了新闻内容。</div> <dvid="News4">这是第四条新闻的标题</dv> < diy id="NeWs4C">这是第四条新闻的简介,主要说明了新闻内容。<div> </header </html> 3. 2E Lattr="value"] E[attr=" value"]选择器和E[attr]选择器,从字面上就能很清 楚的理解出来其区别。E[attr=" value"]是指定了属性值“ value”, 而E[atτr只是选择了有对应的属性,并没有明确指其对应的属性值 " value",这也是这两种选择器的最大区别之处。 E[attr=" value冂]选择器要求属性和属性值必须完全匹配。 案例 例11-8:指定属性值的选择器 <!doctype html> <meta charset="utf-8> <ite>指定属性值的属性选择器<rite> <style type="text/css"> [id]{ font-size: 12px lid="News1"]t font-size: 14 color #000 </style 11《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
11 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn </head> <body> <header> <div id="News1">这是第一条新闻的标题</div> <div id="News1-c">这是第一条新闻的简介，主要说明了新闻内容。</div> <div id="News2">这是第二条新闻的标题</div> <div id="News2-c">这是第二条新闻的简介，主要说明了新闻内容。</div> <div id="News3">这是第三条新闻的标题</div> <div id="News3-c">这是第三条新闻的简介，主要说明了新闻内容。</div> <div id="News4">这是第四条新闻的标题</div> <div id="News4-c">这是第四条新闻的简介，主要说明了新闻内容。</div> </header> </body> </html> 3.2E[attr="value"] E[attr="value"]选择器和 E[attr]选择器，从字面上就能很清 楚的理解出来其区别。E[attr="value"]是指定了属性值“value”， 而 E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值 "value"，这也是这两种选择器的最大区别之处。 E[attr="value"]选择器要求属性和属性值必须完全匹配。 案例： 示例 11-8：指定属性值的选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>指定属性值的属性选择器</title> <style type="text/css"> [id] { font-size:12px; color:#C00; } [id="News1"] { font-size:14px; color:#000; } </style> </head>
<dvid="NeWs1">这是第一条新闻的标题</div> < diy id="NeWs1C">这是第一条新闻的简介,主要说明了新闻内容。<div> <dvd="NeWs2">这是第二条新闻的标题<dv> < diy id="News2-c">这是第二条新闻的简介,主要说明了新闻内容。<div> <dvid="NeWs3">这是第三条新闻的标题<dv <dvid="NeWs3C">这是第三条新闻的简介,主要说明了新闻内容。<div> <dvd="NeWs4">这是第四条新闻的标题<dv> < diy id="NeWs4C">这是第四条新闻的简介,主要说明了新闻内容。<div> 3. 3ELattr E[attrˇ=" value"]根据属性值中的词列表的某个词来进行选择 元素 此属性选择器要求属性值是一个或多个词列表,如果是列表时, 多个词需要用空格隔开,只要元素的属性值中有一个词和 value相匹 配就可以选中该元素。 粲例 例11-9:根据属性值单词的选择器 <meta charset="utf-8> <ite>根据属性值单词的选择器< /title> style type="text/cs [id]{ font-size: 12px lid="News1"]t font color #000 color #090 12《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
12 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <body> <header> <div id="News1">这是第一条新闻的标题</div> <div id="News1-c">这是第一条新闻的简介，主要说明了新闻内容。</div> <div id="News2">这是第二条新闻的标题</div> <div id="News2-c">这是第二条新闻的简介，主要说明了新闻内容。</div> <div id="News3">这是第三条新闻的标题</div> <div id="News3-c">这是第三条新闻的简介，主要说明了新闻内容。</div> <div id="News4">这是第四条新闻的标题</div> <div id="News4-c">这是第四条新闻的简介，主要说明了新闻内容。</div> </header> </body> </html> 3.3E[attr~="value"] E[attr~="value"]根据属性值中的词列表的某个词来进行选择 元素。 此属性选择器要求属性值是一个或多个词列表，如果是列表时， 多个词需要用空格隔开，只要元素的属性值中有一个词和 value 相匹 配就可以选中该元素。 案例： 示例 11-9：根据属性值单词的选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>根据属性值单词的选择器</title> <style type="text/css"> [id] { font-size:12px; color:#C00; } [id="News1"] { font-size:14px; color:#000; } [id~="Content"] { color:#090; } </style>