HTML CSS (Basic) Chapter4(Pink) 复合选择器

最新推荐文章于 2024-06-19 12:46:29 发布

FeverTwice

最新推荐文章于 2024-06-19 12:46:29 发布

阅读量195

点赞数

分类专栏： CSS之路 HTML之路文章标签： html css html5 css3 前端

本文链接：https://blog.csdn.net/LeungSr/article/details/118732419

版权

HTML之路同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS之路

27 篇文章 0 订阅

订阅专栏

文章目录

1. CSS复合选择器
2. 示例
写在最后

1. CSS复合选择器

后代选择器又称包含选择器，可以选择父元素中的子元素（li是ol的孩子）元素1和元素2之间一定要用空格隔开
后代选择器可以是基本选择器的组合
子选择器只能选择作为某元素最近的一级子元素，简单理解就是选择亲儿子元素

2. 示例

Eg1: CSS后代选择器

格式

元素1 元素2 {样式声明}

源代码

<!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>
        /* 我要把ol中的li改为pink */
        ol li {
            color: deeppink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: blue;
        }

        /* 后代选择器可以是基本选择器的组合 */
        .nav li a {
            color: yellow;
        }
    </style>
</head>

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

    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">这个a不会变化</a></li>
    </ul>

    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">这个a变黄色</a></li>
    </ul>

</body>

</html>

测试效果

后代选择器

Eg2: 子元素选择器

元素1 > 元素2 {样式声明}

源代码

<!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>
        .nav>a {
            color: red;
        }
    </style>
</head>

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

</html>

测试效果

子元素选择器

Eg3: 并集选择器

并集选择器可以选择多组标签，并同时为他们定义相同的样式，通常用于集体声明
约定的语法规范，并集选择器竖着写
一定要注意最后一个选择器不需要加逗号
逗号，是和的意思

元素1,元素2 {样式声明}

源代码

<!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>
        /* 要求1:把胸大二熊二改为粉色 */
        /* div,
        p {
            color: deeppink;
        } */

        /* 要求2: 把 熊大熊二 还有小猪佩奇一家改为粉色*/
        div,
        p,
        .pig li {
            color: deeppink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>

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

</body>

</html>

测试效果

在这里插入图片描述

Eg4: 伪类选择器

鼠标放到文字上就会变颜色，这个效果可以通过伪类选择器实现
伪类选择器最大特点是使用冒号:来实现
记得链接顺序一定是先link然后visited然后hover最后是active
LVHA love hate LV包包hao（好）
在body中给链接指定样式是不行的，要特定给链接指定样式
一般的话直接加一个hover就好

语法	用法
a:link	选择所有未被访问的链接
a: visited	选择所有已被访问的链接
a: hover	选择鼠标指针位于其上的链接
a: active	选择活动链接(鼠标按下未弹起的链接

源代码

<!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>
        /* 未访问过的链接 */
        a:link {
            color: #000;
            text-decoration: none;
        }

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

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

        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a><br>
    <a href="www.ccc.com">未知的网站</a>
</body>

</html>

测试效果

小猪佩奇

Eg5: focus伪类选择器

focus选取获得焦点的表单元素

源代码

<!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>
        /* 把获得光标的表单元素选取出来 */
        input:focus {
            background-color: hotpink;
            color: green;
        }
    </style>
</head>

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

</html>