选择器的使用

目录

1.常用选择器

2复合选择器

3.关系选择器

1.常用选择器：

元素选择器：作用：选中对应元素或者标签里面的内容

                     语法：标签名{ }

                     例如把h1的标题内容变为红色 

h1{color: red;}

id选择器：

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

      语法：#id属性值{}

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

class选择器：

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

          语法：.class属性值{}

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

通配选择器：

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

       语法：*{}

例如将所有标签字体变为24px

 *{
        font-size: 24px;
      }

2 复合选择器：

交集选择器：

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

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

      例如  div.red{}  .red1#red2{}

      注意：如果选择器中有元素选择器，元素选择器必须要放在第一位

例如将class为red的诗句变为红色，同时将class为red的div字体变为24px

.red{
        color: red;
      }
      div.red{
        font-size: 24px;
      }

并集选择器：

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

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

例如将h1,h3字体颜色变为黄色

h1,h3{
       color: green;
     }

3.关系选择器：

子元素选择器：

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

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

例如为超市的子元素设置一个字体颜色红色

#cs>p,#cs>div{color: red;}

后代选择器：

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

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

例如：通过祖先元素div，找到后代元素span，让字体变为30px

 div span{font-size: 30px;}

下一个兄弟选择器：作用效果只显示在紧挨着的下一个兄弟

        语法：兄+弟{}

所有兄弟选择器：选择下面所有兄弟，前面的不选

 语法：兄~弟{}