本关任务:使用属性值的包含及前缀选择器设置文字样式。
为了完成本关任务,你需要掌握:1.属性值选择器用法,2.属性值包含与连字符选择器,3.文本粗细的设置,4.背景色的设置。
属性值选择器
属性值选择器选取带有指定属性及取值的元素。语法格式如下:
选择器[属性名=属性取值]{属性:属性取值;}
例如:
h1[id=yyy]{color:red;}
属性值的包含与连字符选择器
属性值的包含选择器选取属性值中包含指定词汇的元素。语法格式如下:
选择器[属性名~=指定词汇]{属性:属性取值;}
属性值的连字符选择器选取带有以指定值开头的属性值的元素,该值必须是整个单词。语法格式如下:
选择器[属性名~=前缀]{属性:属性取值;}
文本加粗的属性
font-weight设置字体的粗细,取值可以是bolder(特粗体)、bold(粗体)、normal(正常)、lighter(细体)或100~900之间的9个等级。
元素背景色的设置
background-color属性用于设置元素背景颜色。属性取值为颜色单词或颜色代码。
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
1.将class属性取值为b的
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
人之所能,是相信自己能,并尽其所能,祝你成功!
<!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 ******* */ /* ********* 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>