常用选择器和复合选择器（vscode）

常用选择器：

题：

/* 需求一：标题变红色 */

      /* 1、元素选择器（标签选择器）

      作用：选中对应标签的内容

      语法：标签名{css样式····}

      例子：h1{}，h3{},p{}

      */

      h1{

        color: red;

      }

 

/* 需求二：将第一句诗变绿色 */

      /* 2、id选择器

      作用：选中对应id属性值的内容

      语法：#id属性值{}

      例子：#p1{},#p2{}····

      注意：id属性值不能重复使用

      */

      #p1{

        color: green;

      }

 

/* 需求三：将第二、三句诗变橙色 */

      /* 3、class选择器

      class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用

      作用：选中对应class属性值的内容

      语法：.class属性值{}

      注意：class属性值可以起多个，中间用空格隔开即开

      例子：.s1{},.ss{},.pp{}

      */

     .s1{

       color: orange;

     }

 

/* 需求四：给所有的标签字体变为24px */

      /* 4、通配选择器

          作用：选中所有的标签，进行设置

          语法：*{}

          */

      *{

        font-size: 24px;

      }

 复合选择器：

题：

 

/* 复合选择器两种 交集选择器，并集选择器  */

      /* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */

      /* 1、交集选择器

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

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

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

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

      */

      .red {

        color: red;

      }

      div.red {

        font-size: 34px;

      }

 

/* 需求二：将h1,h3字体颜色变为橙色*/

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

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

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

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

      */

      h1,h3{

        color: orange;

      }