“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情”
选择器
FED9 CSS选择器——标签、类、ID选择器
描述
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
color: rgb(255, 0, 0);
font-size: 20px
}
.green {
color: rgb(0, 128, 0);
}
#black {
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
FED10 CSS选择器——伪类选择器
描述
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
本题考点：nth-child()
根据题目要求通过css修改ul元素标签下第二个和第四个li子元素标签的背景颜色，在css中可以通过伪类选择器:nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
li:nth-child(even) {
background-color: rgb(255, 0, 0);
}
/* li:nth-child(2) {
background-color: rgb(255, 0, 0);
}
li:nth-child(4) {
background-color: rgb(255, 0, 0);
} */
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
FED11 CSS选择器——伪元素
描述
请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div::after {
content: "";
width: 20px;
height: 20px;
background-color: rgb(255, 0, 0);
display: block;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- div::after表示在div元素后插入内容。
- 在元素上，content 的初始值为 ‘normal’。在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值。
- 题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block
