css3选择符

一、css属性选择器:  通过html属性选择对应的标签

1 选择符[属性名]{  }                  当一个元素有当前html属性值名称则匹配成功.

2 选择符[属性名="属性值"]       属性和属性名都匹配成功才做选中

3 选择符[属性~="属性值"]        当前属性的属性值为一个词列表(多个单词以空格隔开) ,  只要有当前指定的词就能匹配. 

4 选择符[属性^="字符"]            当这个属性值开头的时候被匹配(只要开头匹配就行)

5 选择符[属性$="字符"]            当这个属性值结尾的时候被匹配(只要结尾匹配就行)

6 选择符[属性*="字符"]       　  只要属性值里面包含这个字符就能匹配

7 选择符[属性|="字符"]       　  属性值仅有当前字符 或者 以字符-开头的 (left-con)

二、css伪类选择器：

1：结构性伪类：

①只有一类标签的集合：

h2:first-child {  }   选中 h2所在 整个 集合里面 第一个h2

h2:last-child {  }    选中 h2所在 整个 集合里面 最后一个h2

h2:nth-child(第几个){}   通过第几个进行查找 (第几个)   even  odd  2n 2n + 1

h2:nth-last-child(倒数第几个){ }

h2:only-child {  }   当前集合里面只有一个h2才会被选中

②含有多类标签的集合：

h2:first-of-type {  }   选中 h2所在 整个 集合里面 第一个h2

h2:last-of-type {  }    选中 h2所在 整个 集合里面 最后一个h2

h2:nth-of-type(第几个){}   通过第几个进行查找 (第几个)   even  odd  2n 2n + 1

h2:nth-last-of-type(倒数第几个){ }

h2:only-of-type {  }   当前集合里面只有一个h2才会被选中

③补充:

选择符:root{}  　　  选中的是根元素

选择符:empty{}  　  当一个元素没有任何内容或者任何子元素的时候被选中

2：目标伪类：

选择符：target　　 选择匹配E的所有元素，且匹配元素被相关URL指向

3: 状态伪类：

选择符:enabled          表单元素可用的时候执行的样式

选择符:disabled        表单元素禁用的时候执行的样式

选择符:checked          表单选中(单选 多选按钮选中的时候)

选择符::selection       文本选中的时候的样式.

4：动态伪类：

①选择符:link

链接伪类选择器  

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

②选择符:visited

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

③选择符:active

用户行为选择器

选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

④选择符:hover

用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

⑤选择符:focus

用户行为选择器

选择匹配的E元素，而且匹配元素获取焦点

三、层级选择符

1：子选择器：

父元素选择器>子元素选择器    选中只是父元素最近一层的子元素。

2:兄弟元素选择器：

元素1+元素2   同级   　　　　 选中元素1同级离得最近的下面的兄弟元素

3:通用选择器：

元素1~元素2   同级    　　　   选中元素1同级下面的所有的元素2