英文翻译:
!DOCTYPE html:文档类型html
html:超文本标记
head:头部
meta:元信息
charset:字符集
title:标题
body:文档主体
color:颜色
演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择li父元素中的第5个li子元素
li:nth-child(5){
color: red;
} */
/* 选择li父元素中是奇数的li子元素
li:nth-child(2n+1){
color: blue;
} */
/* 选择li父元素中是偶数的li子元素
li:nth-child(2n){
color: green;
} */
/* 选择li父元素中前6个li子元素(6到1)
li:nth-child(-n+6){
color: red;
} */
/* 选择li父元素中从第4个开始到最后的所有li子元素
li:nth-child(n+4){
color: yellow;
} */
/* 选择li父元素中从第3个开始到第10个结束的所有li子元素
li:nth-child(n+3):nth-child(-n+10){
color: red;
} */
选择li父元素中从第1个开始,然后+3的所有li子元素
li:nth-child(3n+1){
color: red;
}
</style>
</head>
<body>
<!-- lu>li{我要自学$}*10 -->
<lu>
<li>我要自学1</li>
<li>我要自学2</li>
<li>我要自学3</li>
<li>我要自学4</li>
<li>我要自学5</li>
<li>我要自学6</li>
<li>我要自学7</li>
<li>我要自学8</li>
<li>我要自学9</li>
<li>我要自学10</li>
<li>我要自学11</li>
</lu>
</body>
</html>