css伪类选择器

结构伪类

<body>
    <div>
        <ul>
            <li>
                <p>我是1</p>
            </li>
            <li>
                <p>我是2</p>
            </li>
            <li>
                <p>我是3</p>
            </li>
            <li>
                <p>我是4</p>
            </li>
            <li>
                <p>我是5</p>
            </li>
            <li>
                <p>我是6</p>
            </li>
            <li>
                <p>我是7</p>
            </li>
            <li>
                <p>我是8</p>
            </li>
            <li>
                <p>我是9</p>
            </li>
        </ul>
    </div>
    <style>
        li:nth-of-type(n){
            color: red;
        }
    </style>
</body>

效果图

选择1-6

<body>
    <div>
        <ul>
            <li>
                <p>我是1</p>
            </li>
            <li>
                <p>我是2</p>
            </li>
            <li>
                <p>我是3</p>
            </li>
            <li>
                <p>我是4</p>
            </li>
            <li>
                <p>我是5</p>
            </li>
            <li>
                <p>我是6</p>
            </li>
            <li>
                <p>我是7</p>
            </li>
            <li>
                <p>我是8</p>
            </li>
            <li>
                <p>我是9</p>
            </li>
        </ul>
    </div>
    <style>
        li:nth-of-type(-n+6){
            color: red;
        }
    </style>
</body>

效果截图展示

选择6-9

<body>
    <div>
        <ul>
            <li>
                <p>我是1</p>
            </li>
            <li>
                <p>我是2</p>
            </li>
            <li>
                <p>我是3</p>
            </li>
            <li>
                <p>我是4</p>
            </li>
            <li>
                <p>我是5</p>
            </li>
            <li>
                <p>我是6</p>
            </li>
            <li>
                <p>我是7</p>
            </li>
            <li>
                <p>我是8</p>
            </li>
            <li>
                <p>我是9</p>
            </li>
        </ul>
    </div>
    <style>
        li:nth-of-type(n+6){
            color: red;
        }
    </style>
</body>

效果截图展示

状态伪类

将鼠标移入按钮变成小手并改变背景颜色

<body>
    <div>
        <button class="anniu">我是按钮</button>
    </div>
    <style>
        .anniu{
            border: 0px;
            background-color: coral;
            color: white;
        }
        .anniu:hover {
            cursor: pointer;
            background-color: darkslategray;
        }
    </style>
</body>

移入前效果截图演示

移入后效果截图演示

盒子

div宽度150，高度300，内边距10px，边框5px。

<body>
    <div class="box"></div>
    <style>
        .box {
            box-sizing: border-box;
            width: 150px;
            height: 300px;
            padding: 10px;
            border: 5px;
            border-color: black;
            background-color: bisque;
        }
    </style>
</body>