实训打卡第三天

今天又是收货满满的一天，学习了css介绍、css书写的位置、css的语法以及4类选择器。呜呜呜，太惨了，作业差点没写完。

 /* 四种常用的选择器 */

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;

     }

4、通配选择器

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

          语法：*{}

          */

/* 用关系选择器来选中 */

 1、子元素选择器

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

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

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

      */

    div>h2{

        color: red;

      }

 2、后代选择器

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

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

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

     

      */

      #cs span{

        font-size: 30px;

      }

3、下一个兄弟选择器

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

      语法：兄+弟{} */

      .p1+span{

        background-color: pink;

      }

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

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

      语法：兄～弟{}

      例子：#red～.p1{}