CSS3选择器

0.常用选择器

0.1 元素选择器

元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{} h1{} div{}

p{
           color: red;
}

h1{
           color: green;
}

0.2 id选择器

作用：根据元素的id属性值选中一个元素 语法：#id属性值{} 例子：#box{} #red{}

#red{
           color: red;
      }

0.3 类选择器

类选择器 作用：根据元素的class属性值选中一组元素 语法：.class属性值

.blue{
           color: blue;
      }

       .abc{
           font-size: 20px;
      }

0.4 通配选择器

作用：选中页面中的所有元素 语法: *

*{
           color: red;
      }

1.复合选择器

1.1 交集选择器

作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
           font-size: 30px;
      }

       .a.b.c{
           color: blue
      }

1.2 并集选择器

选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{}

          #b1,.p1,h1,span,div.red{}

h1, span{
           color: green
      }

2.关系选择器

2.1 子元素选择器

作用：选中指定父元素的指定子元素 语法：父元素 > 子元素

div.box > span{
           color: orange;
      }

2.2 后代元素选择器

作用：选中指定元素内的指定后代元素 语法：祖先 后代

div span{
            color: skyblue
        }

选择下一个兄弟 语法：前一个 + 下一个

p + span{
             color: red;
        }

选择下边所有的兄弟 语法：兄 ~ 弟

p ~ span{
             color: red;
        }

3. 属性选择器

[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素

/* p[title]{ */
       /* p[title=abc]{ */
       /* p[title^=abc]{ */
       /* p[title$=abc]{ */
       p[title*=e]{
           color: orange;
      }

4. 伪类选择器

• 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素...
• 伪类一般情况下都是使用:
  • 开头 :first-child 第一个子元素
  • :last-child 最后一个子元素
  • :nth-child() 选中第n个子元素
  • 特殊值：
  • n 第n个 n的范围0到正无穷
  • 2n 或 even 表示选中偶数位的元素
  • 2n+1 或 odd 表示选中奇数位的元素
  • 以上这些伪类都是根据所有的子元素进行排序
• :first-of-type :last-of-type :nth-of-type() 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序:not() 否定伪类 将符合条件的元素从选择器中去除

/* ul > li:first-child{
          color: red;
      } */
   
       /* ul > li:last-child{
          color: red;
      } */

       /* ul > li:nth-child(2n+1){
          color: red;
      } */

       /* ul > li:nth-child(even){
          color: red;
      } */

       /* ul > li:first-of-type{
          color: red;
      } */

       ul > li:not(:nth-of-type(3)){
           color: yellowgreen;
      }

5. a元素的伪类

• :link 用来表示没访问过的链接（正常的链接）
• a:link{
  color: red;
  }
• :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色

a:visited{
           color: orange;
           /* font-size: 50px;   */
      }

• :hover 用来表示鼠标移入的状态

a:hover{
            color: aqua;
            font-size: 50px;
        }

• :active 用来表示鼠标点击

a:active{
            color: yellowgreen;
           
        }

6. 伪元素选择器

表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

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

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

before 和 after 必须结合content属性来使用

p::first-letter{
           font-size: 50px;
      }

       p::first-line{
           background-color: yellow;
      }

       p::selection{
           background-color: greenyellow;
      }

       /* div::before{
          content: 'abc';
          color: red;
      }

      div::after{
          content: 'haha';
          color: blue;
      } */

       div::before{
           content: '『';
        }

       div::after{
           content: '』';
      }

7.样式继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承

p{
           color: red;
           background-color: orange;
      }

       div{
           color: yellowgreen
      }

8. 选择器权重

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式 没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！

/* #box1{
          background-color: orange;
      }

      div#box1{
          background-color: yellow;
      } */

       .d1{
           background-color: purple !important;
      }
       .red{
           background-color: red;
           /* font-size: 20px; */
      }