目录
任务描述
本关任务:使用属性值的包含及前缀选择器设置文字样式。
相关知识
为了完成本关任务,你需要掌握: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的
2.将name属性取值中含有词汇a的 标签添加背景色,颜色值设为pink。
3.将name属性取值中前缀为b的 标签添加背景色,颜色值设为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;
}
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>