CSS选择器

• 元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例如：h1{}     p{}   div{}

        h1{
            color: red;
        }

• id选择器

作用：根据元素的id属性值来选中元素

语法：#id属性值{}

例如：#p1{} #pp{}

注意：id选择，对应属性值，一个页面只能用一次 

      #p1{
            color: orange;
        }

• class选择器

作用：根据元素的class属性值来选中元素

语法：.class属性值{}

例子：.p2{} .p3{} .pp{}

用法跟id选择器类似，但可以复用

        .p2{
            color: green;
        }

• 通配选择器

作用：选中页面中所有的标签

语法：*{}

        *{
            padding: 0;
            margin: 0;
        }

• 复合选择器

并集选择器

             作用：选中同时符合多个条件的元素

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

             注意：如果选择器中有元素选择器，元素选择器要写在前面

      span.p1{
          font-size: 30px;
      }

交集选择器

          作用：同时选择多个选择器对应的元素

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

      h1,h3{
        background-color: greenyellow;
      }

• 关系选择器

子元素选择器  

              作用：通过父元素找到对应的子元素

              语法：父>子{}

后代选择器

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

              语法：祖先 后代{}

相邻兄弟选择器

              作用：通过兄元素找到相邻弟的元素，只找相邻的一个弟弟

              语法：兄+弟{}

选择所有兄弟选择器

            语法：兄~弟{}

            注意：前面的兄弟不选

• 属性选择器

           语法：

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

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

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

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

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

• 伪类选择器

            不存在的类，用来表示一个元素特殊的状态

            例如：第一个元素   被点击元素   鼠标移入的元素

          语法：

             1、 :first-child  第一个子元素

             2、 :last-child   最后一个子元素

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

                    特殊值  

                        n  选择所有的

                        2n+1/odd  选中奇数

                        2n/even    选中偶数

            注意：以上所有的伪类都是根据所有的子元素进行排序

            1、 :first-of-type 同类型的第一个

            2、 :last-of-type  同类型的最后一个

            3、 :nth-of-type(2)  同类型选择哪个

            注意：以上这些伪类是根据同类型的子元素中去选择

• a元素伪类

           :link  用来表示未访问过的链接

           :visited  用来表示访问过的链接

                注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色

           :hover  鼠标移入的效果

           :active  鼠标点击效果

           注意：

             1:link  visited  只对a标签产生效果

               hover  active 对所有标签都可以产生效果

             2:如果要同时设置这四个伪类，那么伪类是有顺序要求的

        :not() 否定伪类

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

• 伪元素选择器

      伪元素  不真实存在元素（元素的位置）

          ::first-letter  表示第一个字母

          ::first-line   表示第一行

          ::selection  选中的内容

         

          ::before  元素的最前面

          ::after   元素的最后面

           before和after需要配合content使用

        p::before{
            color: red;
            content: '你好';
        }

• 选择器的权重

       !important   最高优先级

       内联样式      1000

       id选择器      100

       类和伪类选择   10

       元素选择器     1

       子选择器，相邻选择器  通配符    0

       继承的样式    没有优先级

       注意：1：如果优先级一样，则优先使用靠下的样式

              2：比较优先级的时候，需要将所有的选择器优先级相加，最后优先级高的，则优先展示

              3:选择器权重相加，不会超过上一级选择器的选择器