console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
</head>

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}
ul {
    width: 510px;
    /* border: solid 1px red; */
    overflow: hidden;
    margin: 20px auto;
}
ul li {
    list-style: none;
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    float: left;
}


/*
    选中第四行所有元素去除下边框
    n 从 0 开始 每次加一
*/

li:nth-child(n+16){
    border-bottom: none;
}

/*
    选中第五列的所有元素去除右边框
*/

li:nth-child(5n){
    border-right: none;
}

/*
    选中第一列的所有li元素并去除左边框
*/

li:nth-child(5n+1){
    border-left: none;
}

/*
    选中第一行所有元素去除上边框
*/

li:nth-child(-n+5){
    border-top: none;
}

/*
    选中没有被去除任何边框的li标签并添加背景颜色
*/

li:nth-child(n+7):nth-child(-n+14):not(:nth-child(10)):not(:nth-child(11)){
    background-color: aqua;
}