常用选择器0.1元素选择器元素作用【我爱写游记】

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 属性值

.blue{
           color: blue;
      }
       .abc{
           font-size: 20px;
      }

0.4 个通配符选择器

功能：选择页面中的所有元素语法：*

*{
           color: red;
      }

1.复合选择器1.1个交集选择器

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

p>

div.red{
           font-size: 30px;
      }
       .a.b.c{
           color: blue
      }

1.2 联合选择器

选择器分组（联合选择器）功能：同时选择多个选择器对应的元素语法：selector1、selector2、selector3、selectorn{}

          #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-of-type :last-of-type :nth-of-type() 这些伪类的作用与上面类似，区别在于它们are in Sort 相同类型的元素：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:visited{
           color: orange;
           /* font-size: 50px;   */
      }

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

a:active{
            color: yellowgreen;
           
        }

6. 伪元素选择器

表示页面上一些特殊的、不真实的元素（特殊位置）

伪元素以 :: 开头

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

::first-line 表示第一行

::selection 表示选中的内容

::在元素开始之前

::元素结束后

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.样式继承

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

继承发生在祖先和后代之间

继承的设计是为了方便我们的开发。通过继承，我们可以统一给共同的祖先元素设置一些共同的样式伪元素选择器link，让所有的元素只要一个设置就可以拥有这种样式

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

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伪元素选择器link，那么这个样式会得到最高的优先级，甚至超过内联样式，

注意：这个东西在开发过程中一定要谨慎使用！

/* #box1{
          background-color: orange;
      }
      div#box1{
          background-color: yellow;
      } */
       .d1{
           background-color: purple !important;
      }
       .red{
           background-color: red;
           /* font-size: 20px; */
      }