结构伪类选择器

最新推荐文章于 2025-08-27 00:04:04 发布

原创最新推荐文章于 2025-08-27 00:04:04 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#结构伪类选择器

结构伪类选择器专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS中结构伪类选择器的使用方法，通过具体示例展示了如何使用:nth-child、:nth-last-child及:nth-of-type等选择器来精确地定位和样式化HTML文档中的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*要使该属性生效，元素必须是某个元素的子元素
         该选择符允许使用一个乘法因子(n)来作为换算方式，
         比如我们想选中所有的偶数子元素，那么选择符可以写成：E:nth-child(2n)*/
      li:nth-child(2n){
          background-color: white;
          color: aqua;
          width: 50px;
      }
        li:nth-child(2n+1){
            background-color:black;
            color: aqua;
            width: 50px;
        }
        ul{
            background-color: #cccccc;
            width: 100px;
        }
        li:nth-last-child(2){
            color: #ff7300;
        }
        /*掺杂了其他标签，这个例子用 li:nth-child(2)就不会有效果*/
        p:nth-of-type(2){
            color: blueviolet;
        }
    </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>
</ul>
<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>
</ul>
<div>
    <p>12</p>
    <div>伪段落</div>
    <p>13</p>
    <p>14</p>
    <p>15</p>
</div>
</body>
</html>