结构伪类选择器

最新推荐文章于 2022-02-28 13:49:34 发布

ztt0918

最新推荐文章于 2022-02-28 13:49:34 发布

阅读量311

点赞数 1

分类专栏：结构伪类选择器文章标签：结构伪类选择器

本文链接：https://blog.csdn.net/ztt0918/article/details/71898404

版权

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

1 篇文章 0 订阅

订阅专栏

<!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>