任务描述
本关任务:使用属性值的前缀及后缀选择器设置文字样式。
相关知识
为了完成本关任务,你需要掌握:1.属性值前缀选择器,2.属性值的子串选择器,3.属性值的后缀选择器,4.文本颜色的设置。
属性值前缀选择器
属性值前缀选择器匹配属性值以指定值开头的每一个元素。语法格式如下:
选择器[属性名^=指定的开头]{属性:属性取值;}
属性值的子串选择器
属性值的子串选择器匹配属性值中包含指定值的每一个元素。语法格式如下:
选择器[属性名*=指定值]{属性:属性取值;}
属性值后缀选择器
属性值后缀选择器匹配属性值以指定值结尾的每一个元素。语法格式如下:
选择器[属性名$=指定的结尾]{属性:属性取值;}
编程要求
请在右侧编辑器的Begin - End区域内使用属性选择器补全CSS样式。具体要求是:
1.将title属性取值中以n开头的
标签中的文本颜色设置为blue
2.将title属性取值中含有o的
2.将title属性取值中含有o的
标签添中的文本颜色设置为red。
3.将title属性取值中结尾为t的
3.将title属性取值中结尾为t的
标签中的文本颜色设置为green。
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
人之所能,是相信自己能,并尽其所能,祝你成功!
扫描二维码关注公众号,回复:
13540883 查看本文章
代码示例
<!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>