（每日小知识）css选择器进阶知识

1、交集选择器

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

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

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

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

.red{color:red}
div.red{fond-size:20px}

2、并集选择器

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

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

div,p{color:red}

3、子元素选择器

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

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

#cs>p{color:red}

4、后代选择器

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

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

div span{color：red}

5、兄弟选择器

语法：兄+弟{}

#cs+p{backgroundcolor:red}

6、属性选择器

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

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

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

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

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

 [title]{
    color: red;
  }
  [title=ab]{
    color: green;
  }
  [title^=ab]{
    background-color: pink;
  }
  [title$=ab]{
    font-size: 30px;
    
  }
  [title*=c]{
    background-color: green;
  }