博学谷 - CSS笔记05 - CSS 的复合选择器

1.什么是复合选择器
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器有：后代选择器，子选择器，并集选择器，伪类选择器等。

2.后代选择器
后代选择器又叫包含选择器，可以选择父元素里面的子元素。
语法：

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

• 元素1和元素2中间用空格隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
• 元素1和元素2可以是任意的基础选择器

demo：

    <style>
        ol li {
            color: pink;
        }
    </style>

    <ol>
        <li>ol的儿子1</li>
        <li>ol的儿子2</li>
        <li>ol的儿子3</li>
        <a href="#">
            <li>ol的孙子1</li>
        </a>
    </ol>
    <ul>
        <li>ul的儿子1</li>
        <li>ul的儿子2</li>
        <li>ul的儿子3</li>
    </ul>

效果：

3.子选择器
子选择器只能选择某元素的最近一级子元素，可理解为亲儿子选择器。
语法：

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

• 元素1和元素2中间用大于号隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，其他一律不管

demo：

        ul>li {
            color: pink;
        }

    <ul>
        <li>亲儿子1</li>
        <li>亲儿子2</li>
        <li>亲儿子3</li>
        <a href="#">
            <li>孙子1</li>
        </a>
    </ul>

效果：

4.并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。
语法：

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

• 元素1和元素2中间用英文状态下的逗号隔开
• 逗号可以理解成和的意思
• 通常用于集体声明
• 约定语法规范，并集选择器竖着写，最后一个选择器不需要加逗号

demo：

    div,
    p,
    ul>li {
        color: red;
    }

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
<ul class="ul">
    <li>li标签1</li>
    <li>li标签2</li>
    <li>li标签3</li>
</ul>

效果：

5.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第n个元素。
伪类选择器书写的特点，用英文状态下的冒号(:)表示，比如:hover、:first-child等。
伪类选择器有链接伪类、结构伪类等。

6.链接伪类选择器

标签	说明
a:link	没有点击过(访问过)的链接
a:visited	点击过(访问过)的链接
a:hover	鼠标经过的那个链接
a:active	鼠标正在按下还没有弹起鼠标的那个链接

• 为了确保生效，请按照LVHA的顺序声明a:link - a:visited - a:hover - a:active
• 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

demo：

        a {
            color: #333;
            text-decoration: none;
        }

        /* 没有点击过的链接 */
        a:link {
            color: red;
        }

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

        /* 鼠标经过的那个链接 */
        a:hover {
            color: yellow;
        }

        a:active {
            color: green;
        }

    <a href="#">链接伪类选择器</a>
    <a href="#">没有点击过的链接伪类选择器</a>
    <a href="https://www.baiud.comsss">未点击过</a>

效果：

7.:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下<inout>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

demo：

        /* 将输入框的背景色变成粉红色，字体变成红色 */
        :focus {
            background-color: pink;
            color: red;
        }

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

效果：

8.文章参考链接
a. https://www.boxuegu.com/