这篇博客详细介绍了CSS中的两种结构伪类选择器——`:not-child(n)`和`:nth-of-type(n)`。通过实例展示了它们的区别和用法，如何针对HTML列表元素进行样式定制，如改变背景颜色。`:first-child`用于选中第一个子元素，`:last-child`选中最后一个，`:nth-child(3)`则选中第三个子元素，`:nth-child(2n)`选中所有偶数位置的子元素。这些选择器为网页设计提供了精确的元素定位和美化能力。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 50px auto;
width: 400px;
list-style: none outside none;
}
li{
display: inline-block;
margin: 5px;
padding: 5px;
width: 50px;
height: 50px;
font:bold 30px/50px arial;
background: #000;
color: #fff;
border-radius: 50px;
text-align: center;
}
/*:first-child使用*/
ul>li:first-child{
background-color:green ;
}
ul>li:last-child{
background-color: blue;
}
/*:nth-child 与：nth-of-type(n)之间的区别：在特定的区域中查找*/
ul>li:nth-child(3){
background-color: yellow;
}
ul>li:nth-child(2n){
background-color: red;
}
</style>
</head>
<body>
<ul>
<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>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 50px auto;
width: 400px;
list-style: none outside none;
}
li{
display: inline-block;
margin: 5px;
padding: 5px;
width: 50px;
height: 50px;
font:bold 30px/50px arial;
background: #000;
color: #fff;
border-radius: 50px;
text-align: center;
}
/*:first-child使用*/
ul>li:first-child{
background-color:green ;
}
ul>li:last-child{
background-color: blue;
}
/*:nth-child 与：nth-of-type(n)之间的区别：在特定的区域中查找*/
ul>li:nth-child(3){
background-color: yellow;
}
ul>li:nth-child(2n){
background-color: red;
}
</style>
</head>
<body>
<ul>
<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>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
