<! Doctype html>
<html lang = "EN">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">>
<Title> Document </Title>
<Style>
div [class^= "f_row"] li {li {
Float: left;
margin: 10px;
}
div [class^= "f_row"] {{
overflow: hidden;
margin: 20px auto;
}
UL,
li {{
margin: 0;
padding: 0;
list-style: none;
}
.c {{
width: 800px;
margin: 20px auto;
}
/* -----------------Select the first sequence1One2One3indivualdiv------------------- -------- */
/ * Error .f_row1 div: nth-child (1) Effective and .f_row1 div: nth-child (2) No */
.f_row1 div: nth-child (1) {
background-color: pink;
}
.f_row1 div: nth-child (2) {
background-color: pink;
}
/* correct */
.f_row2 li: nth-child (1) div {
background-color: #005971;
}
.f_row2 li: nth-child (2) div {
background-color: #005971;
}
.f_row2 li: nth-child (3) div {
background-color: #005971;
}
/* ------------------------------------------------------------------------------------------------------------------ ----- */
/ * Error NTH-Child (1) Non-selected NTH-Child (2) Select 1 */
.f_row3 P: NTH-Child (1) {{
background-color: pink;
}
.f_row3 P: NTH-Child (2) {{
background-color: pink;
}
/* correct */
.f_row4 P: NTH-OF-TYPE (1) {{
background-color: #005971;
}
.f_row4 P: NTH-OF-TYPE (2) {{
background-color: #005971;
}
</style>
</head>
<body>
<div class = "c">
<div class = "f_row1">
<ul>
<li>
<div> 1 </div>
<p> Genuine guarantee </p>
<p> Genuine guarantee, provide invoices </p>
</li>
<li>
<div> 2 </div>
<p> Speed Logistics </p>
<p> Speed logistics, delivered quickly </p>
</li>
<li>
<div> 3 </div>
<p> No excellent after -sales </p>
<p> 7 days No reason to return and exchange </p>
</li>
<li>
<div> 3 </div>
<p> Featured Service </p>
<p> Private custom home appliance package </p>
</li>
<li>
<div> 4 </div>
<p> Help Center </p>
<p> Your Shopping Guide </p>
</li>
</ul>
</div>
<div class = "f_row2 clearfix">
<ul>
<li>
<div> 1 </div>
<p> Genuine guarantee </p>
<p> Genuine guarantee, provide invoices </p>
</li>
<li>
<div> 2 </div>
<p> Speed Logistics </p>
<p> Speed logistics, delivered quickly </p>
</li>
<li>
<div> 3 </div>
<p> No excellent after -sales </p>
<p> 7 days No reason to return and exchange </p>
</li>
<li>
<div> 4 </div>
<p> Featured Service </p>
<p> Private custom home appliance package </p>
</li>
<li>
<div> 5 </div>
<p> Help Center </p>
<p> Your Shopping Guide </p>
</li>
</ul>
</div>
<div class = "f_row3 clearfix">
<ul>
<li>
<div> 1 </div>
<p> Genuine guarantee </p>
<p> Genuine guarantee, provide invoices </p>
</li>
<li>
<div> 2 </div>
<p> Speed Logistics </p>
<p> Speed logistics, delivered quickly </p>
</li>
<li>
<div> 3 </div>
<p> No excellent after -sales </p>
<p> 7 days No reason to return and exchange </p>
</li>
<li>
<div> 4 </div>
<p> Featured Service </p>
<p> Private custom home appliance package </p>
</li>
<li>
<div> 5 </div>
<p> Help Center </p>
<p> Your Shopping Guide </p>
</li>
</ul>
</div>
<div class = "f_row4 clearfix">
<ul>
<li>
<div> 1 </div>
<p> Genuine guarantee </p>
<p> Genuine guarantee, provide invoices </p>
</li>
<li>
<div> 2 </div>
<p> Speed Logistics </p>
<p> Speed logistics, delivered quickly </p>
</li>
<li>
<div> 3 </div>
<p> No excellent after -sales </p>
<p> 7 days No reason to return and exchange </p>
</li>
<li>
<div> 4 </div>
<p> Featured Service </p>
<p> Private custom home appliance package </p>
</li>
<li>
<div> 5 </div>
<p> Help Center </p>
<p> Your Shopping Guide </p>
</li>
</ul>
</div>
</div>
</body>
</html>Location>code7788
>text
Understand the structural pseudo-classes in one article :nth-child && :nth-of-typ
Popularity：728 ℃/2025-01-25 21:45:28