学习前端的第二十天

CSS3

一、css属性选择器
css属性选择器: 通过html属性选择对应的标签
1. 选择符[属性名]{ } 当一个元素有当前html属性值名称则匹配成功.
2. 选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中
3. 选择符[属性~=“属性值”] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.
4. 选择符[属性^=“字符”] 当这个属性值开头的时候被匹配(只要开头匹配就行)
5. 选择符[属性$=“字符”] 当这个属性值结尾的时候被匹配(只要结尾匹配就行)
6. 选择符[属性*=“字符”] 只要属性值里面包含这个字符就能匹配
7. 选择符[属性|=“字符”] 属性值仅有当前字符 或者 以字符-开头的 (left-con)
二、结构性伪类
选择符:first-child { } 选中 选择符所在的整个集合里面 第一个选择符
选择符:last-child { } 选中 选择符所在的整个集合里面 最后一个选择符
选择符:nth-child(第几个){} 通过第几个进行查找 (第几个) even（单数） odd（双数） 2n 2n + 1
选择符:nth-last-child(倒数第几个){ }
选择符:only-child { } 当前集合里面只有一个选择符才会被选中
选择符:first-of-type { } 选中 选择符所在的整个集合里面 第一个选择符
选择符:last-of-type { } 选中 选择符所在的整个集合里面 最后一个选择符
选择符:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
选择符:nth-last-of-type(倒数第几个){ }
选择符:only-of-type { } 当前集合里面只有一个选择符才会被选中
补充:
:root{} 选中的是根元素
选择符:empty{} 当一个元素没有任何内容或者任何子元素的时候被选中
三、目标伪类
：target 选择匹配的所有元素，且匹配元素被相关URL指向
四、ui元素状态伪类选择器
:enabled 表单元素可用的时候执行的样式
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)
::selection 文本选中的时候的样式.
五、动态伪类
:link
链接伪类选择器
选择符被定义了超链接并未被访问过。常用于链接描点上
:visited
链接伪类选择器
选择符被定义了超链接并已被访问过。常用于链接描点上
:active
用户行为选择器
选择符被激活。常用于链接描点和按钮上
: hover
用户行为选择器
用户鼠标停留在元素上。IE6及以下浏览器仅支持a:hover
: focus
用户行为选择器
使元素获取焦点
六、层级选择器：
1：子选择器
父元素选择器>子元素选择器 选中只是父元素最近一层的子元素。
2:兄弟元素选择器
元素1+元素2 同级 选中元素1同级离得最近的下面的兄弟元素
3:通用选择器
元素1~元素2 同级 选中元素1同级下面的所有的元素2