标签：CSS3 Web name color div 取值 选择器 属性
目录
任务描述
本关任务：使用属性值的包含及前缀选择器设置文字样式。
相关知识
为了完成本关任务，你需要掌握：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>
标签：CSS3,Web,name,color,div,取值,选择器,属性 来源： https://blog.csdn.net/weixin_51402180/article/details/121892896
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。