CSS-复合选择器随学笔记

CSS复合选择器：

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更搞笑的选择目标元素（标签）；

复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的；

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

1.后代选择器：

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

语法：

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

上述语法表示选择元素1里的所有元素2（后代元素）。

    <style>
        /* 想要把ol里的小li选出来改为pink */
        ol li {
            color: pink;
        }
        ol li a{
            color: powderblue;
        }
        .nav li a {
            color: yellow;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
        <li>我是ol的孩子</li>
    </ol>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li>我是ul的孩子</li>
    </ul>
</body>

注意：

元素1和元素2中间一定要空格隔开；

元素1是父级，元素2是子级，最终选择的是元素2；

元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；

元素1和元素2可以使任意的基础选择器。

2.子选择器：

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

语法：

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

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

    <style>
        /* 后代 */
        .nav a{
            color: yellowgreen;
        }
        /* 子选择器 */
        .nav>a{
            color: violet;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

注意：

元素1和元素2中间用大于号隔开；

元素1是父级，元素2是子级，最终选择的是元素2；

元素2必须是亲儿子，其孙子、重孙子之类的都不归他管。

3.并集选择器:

并集选择器是个选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

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

上述语法表示选择元素1和元素2。

   <style>
        /* 要求1：请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */
        /* 要求2：请把熊大熊二改为粉色，还有小猪一家改为粉色 */
        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和元素2中间用逗号隔开；

逗号可以理解为和的意思；

并集选择器通常用于集体声明。

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

4.伪类选择器：

伪类选择器用于像某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。

这里主要写链接伪类选择器和focus伪类选择器：

链接伪类选择器

语法:

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上方的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

实际开发中主要用到a{}和a:hover。

    <style>
        /* 未访问的链接 a:link  把没有点击过的（访问过的）链接选出来*/
        a:link {
                color: #333;
                text-decoration: none;
        }
        /* 已访问的链接 a:visited 把已经点击（访问过的）链接选出来 */
        a:visited {
            color: orange;
        }
        /* 选择鼠标经过的链接 a:hover */
        a:hover {
            color: skyblue;
        }
        /* 选择我们鼠标正在按下还没有弹起鼠标的那个链接 a:active */
        a:active {
            color: springgreen;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
    <a href="#">猪爸爸</a>
</body>

链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的循顺序声明 :link- :visited- :hover- :active。

2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

    <style>

        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: purple;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

posted @ 2021-10-24 17:21 第五云阅读(84) 评论(0) 收藏举报

刷新页面返回顶部

CSS-复合选择器 随学笔记

公告

CSS-复合选择器随学笔记