1、以下选项中,属于属性选择器的是(C) A、div>span{color:red;} B、#box{color:red;} C、span[id]{color:red;} D、span{color:red;} 2、样式规则如下: p[class $= en]{font-weight:bold;} 该样式规则将对选项(B)产生效果。 A、<p class="end">...</p> B、<p class="ten">...</p> C、<p class="pend">...</p> D、<p class="feand">...</p> 3、样式规则如下: div[name ~= ten]{border:1px solid blue;} 该样式规则将对选项(A)产生效果。 A、<div name="ten a1">...</div> B、<div name="ten-a1">...</div> C、<div name="tena1">...</div> D、<div name="div-ten">...</div> 4、样式规则如下: p[class |= en]{font-size:20px;} 该样式规则将对选项(D)产生效果。 A、<p class = "en able">...</p> B、<p class = "pen able">...</p> C、<p class = "enable">...</p> D、<p class = "en-able">...</p>
属性选择器用于选取带指定属性的元素。语法格式如下:
选择器[属性名]{属性:属性取值;}
例如: h1[id]{color:red;}
text-align属性是将块级标签以及单元格里面的文本内容进行相应的对齐。属性取值可以是:left、right、center、justify。
vertical-align属性是将行内元素一级单元格里面的文本内容进行相应的对齐。属性取值可以是:bottom、top、middle、baseline。
如果希望将块级元素内的文本设置为垂直居中,这里介绍一个巧妙的方法就是将文本行高line-height与块级元素的height值设置一样。如果设置不一样,会有怎样的结果呢?聪明的您,一定能试出规律的!
请在右侧编辑器的Begin - End区域内使用属性选择器对含有title属性的<div>
标签中的文本进行样式设置,具体要求是:
<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} /* ********* Begin ******* */ div[title]{ font-size: 25px; text-align: center; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>
属性值选择器选取带有指定属性及取值的元素。
语法格式如下: 选择器[属性名=属性取值]{属性:属性取值;}
例如: h1[id=yyy]{color:red;}
属性值的包含选择器选取属性值中包含指定词汇的元素。
语法格式如下: 选择器[属性名~=指定词汇]{属性:属性取值;}
属性值的连字符选择器选取带有以指定值开头的属性值的元素,该值必须是整个单词。
语法格式如下: 选择器[属性名~=前缀]{属性:属性取值;}
font-weight设置字体的粗细,取值可以是bolder(特粗体)、bold(粗体)、normal(正常)、lighter(细体)或100~900之间的9个等级。
background-color属性用于设置元素背景颜色。属性取值为颜色单词或颜色代码。
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
<div>
标签中的文本加粗效果设置为bold<div>
标签添加背景色,颜色值设为pink。<div>
标签添加背景色,颜色值设为orange。<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } /* ********* Begin ******* */ div[class=b]{ font-weight: bold; } div[name~=a]{ background-color: pink; } div[name|=b]{ background-color:orange; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>
属性值前缀选择器匹配属性值以指定值开头的每一个元素。
语法格式如下: 选择器[属性名^=指定的开头]{属性:属性取值;}
属性值的子串选择器匹配属性值中包含指定值的每一个元素。
语法格式如下: 选择器[属性名*=指定值]{属性:属性取值;}
属性值后缀选择器匹配属性值以指定值结尾的每一个元素。
语法格式如下: 选择器[属性名$=指定的结尾]{属性:属性取值;}
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
<div>
标签中的文本颜色设置为blue<div>
标签添中的文本颜色设置为red<div>
标签中的文本颜色设置为green<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style type="text/css"> div{ width:70px; height:40px; border:1px solid teal; float:left; } li{list-style:none;} div[title]{ font-size:25px; text-align:center; } div[class="b"]{ font-weight:bold; } div[name~="a"]{ background-color:pink; } div[name|="b"]{ background-color:orange; } /* ********* Begin ******* */ div[title^="n"]{ color: blue; } div[title*="o"]{ color: red; } div[title$="t"]{ color: green; } /* ********* End ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body> </html>