选择器进阶版

目录

一.复合选择器

 1、交集选择器

 2、并集选择器（群组选择器）

二.关系选择器

1.子元素选择器

2.后代选择器

 3、下一个兄弟选择器

4、选择下面所有的兄弟(前面的不选)

三.属性选择器

四.伪类选择器

 1 、伪类（不存在的类，特殊的类）

 2、:not() 否定伪类

五.a元素的伪类

1、:link  没有访问过的状态

2、:visited 访问过的状态 

 3、:hover  鼠标移入的状态 

4、:active  鼠标点击后的状态

---

 

一.复合选择器

 1、交集选择器

      作用：选中同时符合多个条件的内容

      语法：选择器1选择器2选择器3····{}

      注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面

      例子：p#p1.pp{},div.ss{}

 2、并集选择器（群组选择器）

      作用：同时选中对应的内容

      语法：选择器1,选择器2,选择器3····{}

      例子：.red,#red1,div,p{}

二.关系选择器

1.子元素选择器

      作用：通过指定的父元素找到指定的子元素

      语法：父元素>子元素{}

      例子：#red>.green{},   .pp>em{}

2.后代选择器

      作用：通过指定的祖先元素找到指定的后代元素

      语法：祖先元素 后代元素{}

      例子：.class .red{},#red p{}

 3、下一个兄弟选择器

      作用：通过指定的兄长找到紧挨着我的一个兄弟

      语法：兄+弟{} */

      例子：.class+.p{}

4、选择下面所有的兄弟(前面的不选)

      作用：通过指定的兄长找到下面所有的兄弟

      语法：兄～弟{}

      例子：#red～.p1{}

三.属性选择器

1.属性选择器

            通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

            语法：[属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素

  

       [id] {
        background-color: green;
      }
      p[title] {
        color: red;
      }
      [title=ab]{
        color: orange;
      }
      [title^=ab]{
        font-size: 30px;
      }
      [title$=ab]{
        background-color: pink;

四.伪类选择器

 1 、伪类（不存在的类，特殊的类）

          定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定

          例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

          常见的伪类选择器

              语法使用‘:’开头

              :first-child   第一个元素

              :last-child    最后一个元素

              :nth-child()   选中第几个元素

               特殊值：

                  2n或even    偶数

                  2n+1或odd   奇数

          以上这些伪类都是根据所有的子元素进行排序

            :first-of-type 第一个元素

            :last-of-type  最后一个元素

            :nth-of-type()   选中第几个元素

          功能跟上面相似，不同的是，这是在同类型的子元素中去选择

 2、:not() 否定伪类

           将符合条件的元素从选择器中去除  

 li:not(#l1){
          background-color: green;
        }

五.a元素的伪类

1、:link  没有访问过的状态

a:link{
        color: orange;
      }

2、:visited 访问过的状态 

 a:visited{
        color: green;
        font-size: 50px;
        background-color: pink;
      }

注意：

       1、:link和:visited 是a标签独有的伪类

       2、由于隐私问题，:link和:visited只能设置字体颜色

 3、:hover  鼠标移入的状态 

a:hover{
        font-size: 30px;
      }
      h1:hover{
        color: green;
        background-color: hotpink;
      }

4、:active  鼠标点击后的状态

a:active{
        background-color: pink;
      }
      div:active{
        color: red;
      }

注意：

        :hover和:active  针对所有的元素