css基础3属性，伪类，集合选择器

最新推荐文章于 2024-09-20 02:44:07 发布

前端菜菜鸟

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量189

点赞数

文章标签： css 选择器

本文链接：https://blog.csdn.net/zh994990183/article/details/99610359

版权

选中元素name属性为sumit的标签
选中元素input属性为login的标签

<style>
    input[name=submit]{
        width: 100px;
        height: 30px;
    }

    input[name=login]{
        width: 300px;
        height: 30px; 
        border: 2px solid orange;
    }
    </style>
</head>

<body>
    <form action="">
        <label for="">登陆</label>
        <input type="text" name="login" placeholder="请输入用户名" value="123456">
        <label for="">密码</label>
        <input type=" password" name="password" placeholder="请输入你的密码">
        <input type="file" name="file" id="">
        <input type="submit" value="提交" name="submit">
    </form>
</body>

:hover 鼠标移上去样式改变
active 鼠标点击改变样式，移开恢复
:link 链接访问之前的样式
:visited 链接访问之后的样式

    <style>
        span:hover {
            color: red;
            font-size: 20px;
            font-weight: 900px;
        }

        .square {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .square:active {
            border-radius: 50%;
            background-color: blue;
        }

        a:link {
            font-size: 12px;
            color: red;
        }

        a:visited {
            font-size: 30px;
            color: yellow;
        }
    </style>
</head>

<body>
    <span>我是要变字体变红，变大，变粗</span>
    <div class="square"></div>
    <a href="https://www.baidu.com/">链接在访问后的样式</a>
</body>

ul:first-child 第一个ul标签
li:first-child 第一个li标签
li:nth-child(3)第三个li标签
li:nth-child(2n) li 为偶数的标签
li:last-of-type 最后一个li标签

ul:first-child {
        color: red;
    }

    li:first-child {
        color: aqua;
    }

    li:nth-child(3) {
        font-size: 20px;
    }

    li:nth-child(2n) {
        color: yellow;
    }

    li:last-of-type {
 

       font-size: 30px;
            font-weight: unset;
            color: violet;
        }
    </style>
</head>

    <body>
        <ul>
            <li>0001</li>
            <li>0002</li>
            <li>0003</li>
            <li>0004</li>
            <li>0005</li>
            <li>0006</li>
            <li>0007</li>
            <li>0008</li>
        </ul>
    </body>