CSS复合选择器（第二天课程05-13课）

最新推荐文章于 2022-06-01 15:04:45 发布

皮匠大大

最新推荐文章于 2022-06-01 15:04:45 发布

阅读量160

点赞数

分类专栏： CSS初学 HTML5初学文章标签： css

本文链接：https://blog.csdn.net/weixin_45727991/article/details/109742016

版权

CSS初学同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

HTML5初学

11 篇文章 1 订阅

订阅专栏

05课、复合选择器简介

1、简介：在CSS中，可以更据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

2、特点：
①、复合选择器可以更准确、更高效地选择目标元素
②、复合选择器是建立在基础选择器之上，由2、多个基本选择器进行组合形成的。
③、常用的有：后代选择器，子选择器、并集选择器、伪类选择器

06课、后代选择器（空格）

1、后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

2、语法元素1 元素2 ｛样式声明｝
（①表示选择元素1（父元素）中的所有元素2（子元素），②中间一定要有空格隔开，③元素1 元素2 元素3 元素4 …允许多个元素嵌套，只要是继承关系，最后选中最小的那个元素集）
eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 注意这里！！！！！！！！！！！！！！只修改ol中的li元素 */
        ol li {
            color: #ff0000;
        }

        /* 注意这里！！！！！！！！！！！！！！只修改ol中的li元素中的链接 */
        ol li a {
            color: green;
        }

        /* 注意这里！！！！！！！！！！！！！！只修改第二个ol中的li元素中的链接 */
        .my_class li a {
            color: pink;
        }
    </style>

</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li> <a href="#">我是ol的链接孩子</a> </li>
    </ol>
    <ol class="my_class">
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li> <a href="#">我是ol的链接孩子</a> </li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>

</html>

注意：shift+alt+上/下键：复制当前文字到上一行/下一行

07、子选择器（亲儿子选择器）（>）

1、子选择器（自元素选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

2、语法元素1 > 元素2 ｛样式声明｝
①用>隔开
②元素1是父集，元素2是亲儿子

eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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>

08、课堂练习

09、并集选择器(,)

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

2、语法元素1,元素2...｛样式声明｝
①用，英文
②任何形式的选择器都可以作为并集选择器的一部分
③语法规范：并集选择器的对象元素喜欢竖着写
eg：

	     /* 把div，p和class为pig中的li子元素都改为红色 */
        div,
        p,.
        pig>li {
            color: red;
        }

10、11、12课、伪类选择器（：）

1、伪类选择器用于像某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。（eg：鼠标放在文字上，文字的颜色就会变化的特效）

2、语法规范：用:代替类选择器中的.

3、分为链接伪类选择器、focus伪类选择器等

①链接伪类选择器：
注意事项
1）要严格按照LVHA的顺序声明：link-visited-hover-active
2）链接的颜色是独立的，不随整体改变而改变，必须特殊修改
3）实际的代码只需要设置link和hover两个代码（其他的没必要）

    <style>
        /* 未访问的链接 黑色，无下划线 */
        a:link{
            color: black;
            text-decoration: none;
        }
        /* 已访问过的链接 橙色 */
        a:visited{
            color: orange;
        }
        /* 鼠标停留处的链接 天蓝色 */
        a:hover {
            color: skyblue;
        }
        /* 鼠标点击时的链接 绿色 */
        a:active {
            color: green;
        }
    </style>

②focus伪类选择器（针对表单）
1）用于选取获得焦点的表单元素（点到文本框中出现光标）
2）焦点就是光标（这个选择器主要针对的是表单元素来设置的）
语法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把获得光标的input表单元素选取出来，修改颜色为粉色。。。 */
        input:focus {
            background-color: pink;
        }
    </style>
</head>

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

</html>