前端学习018---CSS---复合选择器

最新推荐文章于 2024-11-13 08:41:42 发布

叶言-ne

最新推荐文章于 2024-11-13 08:41:42 发布

阅读量92

点赞数

分类专栏：前端学习笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/ketemstion/article/details/120589263

版权

前端学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

复合选择器

1.1 什么是复合选择器

CSS中，更具选择器类型把选择器分为：基础选择器和复合选择器。
复合选择器可以更准确，高效的选择目标元素
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成。
常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等。

1.2 后代选择器

在这里插入图片描述


    <style>
        ol li {
            color: pink;
        }

        ol li a {
            color: brown;
        }

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

<body>
    <ol>
        <li>我是ol的还在</li>
        <li>我是ol的还在</li>
        <li>我是ol的还在</li>
        <li>我是ol的还在</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>

    <ul class="nav">
        <li><a href="#">我是ul的还在</a></li>
        <li>我是ul的还在</li>
        <li>我是ul的还在</li>
        <li>我是ul的还在</li>
    </ul>
</body>

在这里插入图片描述

1.3 子选择器

只选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素。

在这里插入图片描述

 <style>
        .nav>a {
            color: rgb(247, 3, 3);
        }
    </style>
</head>

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

在这里插入图片描述

1.3 并集选择器

可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

在这里插入图片描述

<style>
        /*  把胸大熊二改为粉丝  */
        div,
        p {
            color: pink;
        }

        /* 把熊大熊二改成粉色 还要小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>

</head>

<body>
    <div>熊大</div>
    <p>熊二</p>

    <span>光头强</span>

    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

</body>

在这里插入图片描述

1.5 伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个、第n个元素。

1.6 链接伪类选择器

在这里插入图片描述

 <style>
       /* 未访问的链接 */
        a:link {
            color: rgb(0, 0, 0);
        }

        /* 选择点击过的链接 */
        a:visited {
            color: royalblue;
        }

        /* 选择鼠标经过的链接 */
        a:hover {
            color: pink;
        }

        /* 鼠标点击未松开的时候 */
        a:active {
            color: skyblue;
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>

</body>

在这里插入图片描述

链接伪类选择器的注意事项

在这里插入图片描述

链接伪类选择器实际开发中的写法

1.7 focus 伪类选择器

用于选取获得焦点的表单元素。
有光标的地方。
在这里插入图片描述

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

<body>
    <input type="text">
    <input type="text">
    <input type="text">

</body>