css的高级选择器

    CSS的高级选择器

        层次选择器

             后代选择器

             子选择器

             相邻兄弟选择器

             通用兄弟选择器

        属性选择器

            E[attr] 选择匹配具有属性attr的E元素

            E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

          E[attr^=val]    选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

           E[attr$=val]    选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

           E[attr*=val]    选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

层次选择器

   后代选择器

 

 

 

 

// 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入   空格可以多 但是不可以插入其他的符号以免造成干扰

子选择器

 

 // E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 (左边是父类 右边是子类)

相邻选择器

 

 

// E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 （不会影响到前面的元素  对后面的相邻的元素（后面一个）起作用 ） 

 通用兄弟选择器

 

 //E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 (对元素之前的样式不改变  改变元素之后的所有兄弟元素的样式)

E[attr]属性选择器

 

 

 //E[attr]  选择匹配具有属性attr的E元素  []表示属性的意思 里面写具体属性的名称比如 [id]

E[attr=val]属性选择器

 

 

// E[attr=val]  选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中 （表单[class+class名字])

   

 E[attr*=val]属性选择器

 

//  p元素中class的值只要包含c的背景色都会变成红色 （大小写是区分 如果值是小写 你*号后面是大写 元素是不能被找到的） class*=c (c可以加单双引号 可以不加)

 

 E[attr^=val]属性选择器

 

 

 //表示 属性href是以http开头的a元素 背景色变成红色 否则不变  （^以什么开头）

E[attr$=val]属性选择器

 

//*E[attr$=val]  选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串(

$以**结尾的)