复合选择器

复合选择器简介

         由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）。

复合选择器分类

        复合选择器我们主要学习后代选择器、子代选择器、交集选择器、并集选择器。

• 后代选择器

        html结构存在嵌套的父子级或者后代关系（比如：ul无序列表）

语法：选择器1 选择器2 { 属性：属性值}

注意：

1、选择器1相当于父级元素，选择器2相当于后代元素，之间用空格隔开表示后代关系；

2、后代元素可以是子元素，也可以是孙子级别的元素，只要有嵌套关系就可以找到

 <style>
   ul li {
       color: red;
   }

   .father .son {
       color: green;
   }
  </style>

  <ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
 </ul>
<div class="father">
    <div class="son"></div>
 </div>

• 子代选择器

         html结构必须是父子级的嵌套关系，只能选择第一级的嵌套，不会选择下一级

语法：选择器1>选择器2 { 属性：属性值 }

注意：

1、选择器1相当于父级元素，选择器2相当于子元素，之间用大于号>表示选中第一级的子元素；

2、后代元素必须是子元素（亲儿子），不可以是下一级别的元素；

    <style>
        .box>p {
            color: red;
        }
    </style>
    <div class="father">
        <p>我是亲儿子级别的p标签1</p>
        <p>我是亲儿子级别的p标签2</p>
        <p>我是亲儿子级别的p标签3</p>
        <div class="son">
            <p>我是孙子级别p标签1</p>
            <p>我是孙子级别的p标签2</p>
            <p>我是孙子级别的p标签3</p>
        </div>
    </div>

• 交集选择器

        选中页面中 同时满足 多个选择器的标签，满足即又的关系

语法：选择器1选择器2 {属性：属性值}

注意：

1、交集选择器可以更加精准的选择某一个元素，相当于即又关系，也就是两个需求都要满足

2、最常用的还是标签选择器和类选择器的搭配使用；

3、交集选择器两个选择器之间是绝对不能书写空格，有了空格就会变成后代选择器。

     <style>
        .list li.red {
            color: red;
        }
    </style>
    <ul class="list">
       <li>我是无序列表1</li>
       <li>我是无序列表2</li>
       <li>我是无序列表3</li>
    </ul>

• 并集选择器

        同时选择多个标签，设置相同的样式。

        如果一些元素样式完全一致我们可以通过并集选择器合并起来书写，达到代码简化的作用。

 语法：选择器1，选择器2 {属性：属性值}

        并集选择器我们经常用来集体声明某一些标签的共有样式，比如我们经常在css的前面设置i和em标签的倾斜样式为不倾斜方便咱们在页面中使用。

     <style>
        i,
        em {
            font-style: normal;
        }
    </style>

• 伪类选择器

        所有的html标签都可以设置伪类，我们只需要用英文状态的冒号( : )将选择器和伪类状态连接即可。

语法：选择器1:伪类状态 { css样式 }

常见的伪类状态有： :link，:visited ，:hover，:active 四种状态，还有一种特殊专门作用于表单元素获取焦点状态的 :focus伪类选择器。

常见伪类状态（了解）

选择器:link 未访问的链接（访问前）

选择器:visited 已访问的链接（访问后）

选择器:hover 鼠标移动到连接上（鼠标经过）

选择器:active 选定的链接（按下鼠标时）

注意：如果以上四个状态都要书写必须按照L~V~H~A的顺序来书写，否则就会失去效果。

     <style>
        /* 鼠标访问前 */
        a:link {
            color: red;
        }

        /* 鼠标访问后 */
        a:visited {
            color: green;
        }

        /* 鼠标访问的时候 */
        a:hover {
            color: royalblue;
        }

        /* 鼠标按下的时候 */
        a:active {
            color: tomato;
        }
    </style>

    <a href="#">今天天气不错~</a>

• 伪类选择器实际工作的用法（重点）

        实际开发中我们不会将伪类的四个状态都书写，我们只需要设置鼠标访问状态:hover即可。

1、统一设置一个超链接a的样式，表示我们四个状态的样式都一致；

2、然后通过样式覆盖的原理，设置鼠标访问:hover的样式即可。

    <style>
        /* 单独设置鼠标访问经过的样式覆盖前面的样式即可 */
        .nav li a:hover {
            color: red;
        }
    </style>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品分类</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

• focus伪类选择器

        用于选取获表单元素的焦点，一般input表单或者文本域textarea才能获取该焦点。

    <style>
        input:focus {
            background: springgreen;
        }

        textarea:focus {
            background-color: thistle;
        }
    </style>

    <input type="text">
    <textarea cols="30" rows="10"></textarea>