关系选择器和属性选择器（vscode）

关系选择器：

题：

 

/* 需求一：为div的子元素h2设置一个字体颜色红色 */

      /* 1、子元素选择器

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

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

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

      */

    div>h2{

        color: red;

      }

 

      /* 需求二：div里的span元素字体都变为30px */

      /* 2、后代选择器

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

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

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

     

      */

      #cs span{

        font-size: 30px;

      }

 

/* 需求三:通过衣服p标签找到生鲜区,加背景色粉丝*/

      /*

      3、下一个兄弟选择器

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

      语法：兄+弟{} */

      .p1+span{

        background-color: pink;

      }

 /* 需求四:

      通过衣服区找到下面所有的兄弟，设置字体颜色棕色*/

      */

      .p1~span{

        color: orange;

      }

 

 属性选择器：

题：

 

/* 需求一：有title属性的p标签，颜色变为红色 */

 

      /*

      1:属性选择器

            通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

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

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

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

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

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

    */

      /* [id] {

        background-color: green;

      }

      p[title] {

        color: red;

      }

      [title=ab]{

        color: orange;

      }

      [title^=ab]{

        font-size: 30px;

      }

      [title$=ab]{

        background-color: pink;

      } */

      [title*=abc]{

        color: palevioletred;

      }