HTML.入门篇选择器（2）

1、元素选择器

      作用：选中对应元素/标签里面的内容

      语法：标签名{}

      例如：h1{},p{}

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

      #p1{color: green;} 

       2、id选择器

      作用：选中对应id属性值的元素

      语法：#id属性值{}

      例子：#p1{},#dd{}

      注意：id属性值是独一无二的存在

      

      需求三：将第二句诗也变绿色 

      3、class选择器

          作用：选中对应class属性值的元素

          语法：.class属性值{}

          例如：.p2{},.pp{}

          注意：id选择器和class选择器很像，只不过class属性值可以复用

      

      .p2{color: green;}

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

      4、通配选择器

      作用：选中页面中所有的元素

      语法：*{}

复合选择器  ： 交集选择器，  并集选择器(群组选择器) 

 1、交集选择器

      作用：选中同时符合多个选择器条件的元素

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

2、并集选择器

     作用：同时选中对应选择器的元素

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

子元素选择器

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

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

后代选择器

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

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

 下一个兄弟选择器(仅挨着我的)

      语法：兄+弟{} 

所有兄弟选择器

      语法：兄~弟{}

元素之间的关系

      父子关系     直接包含、被包含的关系

      祖先后代关系  直接或间接包含、被包含的关系

      兄弟关系      拥有共同的父元素

属性选择器

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

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

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

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

                 [属性名*=属性值]{}    选择含有指定属性,只要含有某个属性值的元素