CSS-伪类

最新推荐文章于 2024-07-23 14:51:29 发布

liyang199103031

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量143

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/liyang199103031/article/details/123294645

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /*伪类hover，当鼠标移上去*/
        .active:hover{
            background-color: green;
        }
        /*伪类disabled,当被禁用时*/
        .active1:disabled{
            width: 100px;
            height: 100px;
            background-color: black;
            color:white;
        }
        /*伪类checkbox,当被选中时*/
        /*后面的加号是兄弟选择器，该行的意思是，当checkbox被选中时,找到与.active2同父级下，并且相邻的，并且在active2之后的active3，
          找到后把该标签样式设为宽高等于100px，颜色设为蓝色【因为要相邻，所以只能有一个】*/
        .active2:checked + .active3{
            width: 100px;
            height: 100px;
            background-color:blue;
            
        }
        /*focus，当有焦点时（经常用于text），当点击时,其实也是有焦点时（经常用于button）*/
        button{
            background-color: black;
        }
        button:focus{
            background-color: rebeccapurple;
        }
        /*first-child，last-child,找第一个元素或最后一个元素,注意：这是伪类，不是选择器*/
        .active4 ul li:first-child{
            color: blue;
        }
        .active4 ul li:last-child{
            color: green;
        }
        /*nth-child,找到指定序数的标签，括号内的值可以填写：odd奇数，even偶数，数字*/
        table tr:nth-child(even){
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="active"></div>
    <button class="active1" disabled="disabled">按钮</button>
    <input class="active2" type="checkbox" />
    <div class="active3"></div>
    <div class="active3"></div>
    <button>你好</button>
    <div class="active4">
        <ul>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
    <table style="border: 1px solid black; width: 500px;">
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr><tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr><tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr><tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

liyang199103031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-伪类

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫