CSS的复合选择器

1.什么是复合选择器

    在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的.

    ●复合选择器可以更准确,更高效的选择目标元素(标签)
    ●复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
    ●常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器

2.后代选择器

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

     2.1后代选择器的基本语法格式

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

   上述语法表示选择元素1里面的所有元素2(后代元素)

     例如:
            ul li{样式声明} -->选择ul 里面所有li 标签元素
            ●元素1和元素2 中间用空格隔开
            ●元素1是父级,元素2 是子级,最终选择的是元素2
            ●元素2 只要是元素1 的后代即可

3.子选择器

   子元素选择器(子选择器)只能选择作为某元素的最近一级子元素.

    3.1子选择器的语法格式

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

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

    例如:
            div>p {样式声明}  -->选择div里面最近一级p标签元素
        ●元素1 和元素2中间用大括号隔开
        ●元素1是父级,元素2 是子集最终选择的是元素2
        ●元素2必须是最近的

4.并集选择器

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

    并集选择器是各类选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分.

    4.1并集选择器的语法格式

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

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

         ●元素1和元素2 中间用逗号隔开
          ●逗号可以理解为和的意思
          ●并集选择器通常用于集体声明   

5.伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素.

    伪类选择器书写最大的特点就是用冒号(:)表示.

    因为伪类选择器的分为链接伪类,结构伪类等

    5.1链接伪类选择器 

         5.1.1 链接伪类选择器 语法格式

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

           5.1.2 链接伪类选择器注意事项

                    ①为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active.
                    ②记忆法:love hate 或者lv包包hao
                    ③因为a链接在浏览器中具有默认样式,所有我们实际工作中都需要给链接单独指定样式

           5.1.3 链接伪类选择器实际工作开发中的写法:

                   a 是标签选择器  所有的链接
                       a {
                             color: gray;
                          }
                   :hover 是链接伪类选择器 鼠标经过
                      a:hover {
                                        color : red; /*鼠标经过的时候,有原来的 灰色变成了红色*/
                      }

6. : focus 伪类选择器

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

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

    input:focus {
                        background-color:yellow;
    }

7.复合选择器总结

酒枯推荐

      推荐使用浏览器：Google Chrome

      推荐使用Java环境：IDEA（IntelliJ IDEA）

          本周推荐学习：JavaScript

          推荐学习视频链接：https://ke.qq.com/course/231577?taid=2841395744442521

          推荐练习Java环境：https://leetcode-cn.com/