第一个li元素
ul li:first-child{
background-color: aqua;
}/* ul中的最后一个Li元素 *
ul li:last-child{
background-color: aquamarine;
}
/* 第n个子元素 */
.u2 li:nth-child(2){
background-color: blue;
}p:nth-child(1){
background-color:darkcyan;
}/* 一般会加上父元素 */
li:nth-child(2){
background-color: chartreuse;
}/* 先看数字再看类型 */
body p:nth-child(6){
background-color: brown/* 根据类型先看标签再看是第几个标签 先看类型再看数字*/
p:nth-of-type(2){
background-color: blueviolet;
}
body p:nth-of-type(2){
background-color: blueviolet;
}整体：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类选择器</title>
<style>
/* 第一个li元素 */
ul li:first-child{
background-color: aqua;
}
/* ul中的最后一个Li元素 */
ul li:last-child{
background-color: aquamarine;
}
/* 第n个子元素 */
p:nth-child(1){
background-color:darkcyan;
}
/* 一般会加上父元素 */
li:nth-child(2){
background-color: chartreuse;
}
.u2 li:nth-child(2){
background-color: blue;
}
/* 先看数字再看类型 */
body p:nth-child(6){
background-color: brown;
}
/* 根据类型先看标签再看是第几个标签 先看类型再看数字*/
p:nth-of-type(2){
background-color: blueviolet;
}
body p:nth-of-type(2){
background-color: blueviolet;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="u2">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<p>10</p>
</body>
</html>
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
