CSS复合选择器后代选择器 a:链接伪类选择器 focus:伪类选择器

最新推荐文章于 2023-03-06 14:29:46 发布

悠然少年心

最新推荐文章于 2023-03-06 14:29:46 发布

阅读量211

点赞数

分类专栏： html 前端

本文链接：https://blog.csdn.net/qq_44116353/article/details/114989285

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

后代选择器

<!-- 后代选择器 选择器中间一个空格再写一个选择器
元素1 元素2 {样式声明} 
ul li {样式声明} -->
<style>
    ul li {
        color: coral;
    }

    ol li a {
        color: yellow;
    }

    .nav li a {
        color: green;
    }
</style>

<body>
    <ul>
        <li>我是一号儿子</li>
        <li>我是二号儿子</li>
        <li>我是三号儿子</li>
        <li>我是四号儿子</li>
        <li>我是五号儿子</li>
    </ul>
    <ol>
        <li>我是ol的儿子1</li>
        <li>我是ol的儿子2</li>
        <li>我是ol的儿子3</li>
        <li><a href="">我是ol的孙子这个变成黄色</a> </li>

    </ol>
    <ol class="nav">
        <li>我是ol的儿子1</li>
        <li>我是ol的儿子2</li>
        <li>我是ol的儿子3</li>
        <li><a href="">我是ol的孙子这个变成绿的</a> </li>

    </ol>
</body>

</html>

子类选择器他只选择下一级
元素1 > 元素2 {样式}

<style>
    .nav>a {
        color: green;
    }
</style>

<body>
    <div class="nav">
        <a href="">我是大儿子</a>
        <a href="">我是二儿子</a>
        <p><a href="">我是孙子</a></p>
    </div>
</body>

并集选择器
元素1,元素2{样式声明}

<style>
    /* 并集选择器可以选择多个元素 */
    /* 元素1,元素2{样式声明} 一般竖着写*/
    div,
    p,
    .nav li {
        color: pink;
    }
</style>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="nav">
        <li>小猪佩奇</li>
        <li>佩奇妈妈</li>
        <li>佩奇爸爸</li>
    </ul>
</body>

</html>

伪类选择器

都是标签后面带：
链接伪类
在这里插入图片描述 a:link
a:visited
a:hover
a:active

<style>
    /* 未访问的链接 */
    a:link {
        color: black;
    }

    /* 选择访问过的链接 */
    a:visited {
        color: chartreuse;
    }

    /* 选择鼠标经过的那个链接悬停 */
    a:hover {
        color: cornflowerblue;
    }

    /* 选择鼠标按下没松开的那个链接  */
    a:active {
        color: red;
    }
    /* 一般就只写 a:link 和a:hover */
</style>

<body>
    <a href="#">芜湖</a>
</body>

</html>

focus伪类选择器
选择活动光标的表单
用于input标签当我们鼠标移动到哪个input表单的时候我们就在哪个
input里面显示样式

 <style>
    input:focus {
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <table>
        <input type="text">姓名
        <input type="text">电话
        <input type="text">家庭住址
    </table>
</body>