HTML学习笔记 （三）

1、css 选择器
1.1、元素选择器
E{…}/*E代表有效的HTML元素

可以用“*”代表元素名 可匹配html文档中任意元素（匹配所有）

例子：

*{ 
.
.
}
div{
}

1.2、属性选择器
E｛…｝：对所有E元素起作用
E｛attr｝：对于具有attr属性得E元素起作用
E｛attr=value｝：对包含attr属性且值为value得E元素起作用
E｛attr~=value｝：对包含 attr属性且以空格隔开某个值为value
E｛attr|=value｝：对所有包含arrr属性 且attr属性的值以连字符分割的系列的值第一个值为value的tag元素起作用
E｛attr^=“value”｝：对包含attr属性且值为value开头的字符串的E元素起作用
E｛attr$=“value”｝：对包含attr属性且值为value结尾的字符串的E元素起作用
E｛attr*=“value”｝：对包含attr属性且值为包含value的字符串的E元素起作用
例子：

div{   div[id]{  div[id*=xx]{ .......
}        }        }

1.3、ID选择器
#idValue{…}
定义仅对制定元素起作用的ID选择器语法格式如下：
E#idValue｛…｝

一个id值对应一个元素 唯一性 ，但在不涉及js方面时也可以不唯一
建议一个id对应一个元素
越从根节点开始找对应的元素这条css样式对应的优先级越高class选择器一样

1.4、class选择器
[E].classValue{…} E可以省略省略后代表匹配所有class属性为classValue的元素
定义仅对制定元素起作用的ID选择器语法格式如下：
E#idValue｛…｝
1.5、包含选择器
包含选择器用于制定目标选择器必须处于某个选择器对应的元素内部
selector1 selector2｛…｝/* 这两个都是有效的选择器 */
例如：

div .a{ /* 之间有空格 */
.
.
}

1.6、子选择器
selector1 >selecto r2｛…｝
本选择器选的是前一个选择器对应元素的子元素，不包含子元素下面的元素
1.7、新增 兄弟选择器
selector1 ~ selector2｛…｝
匹配selector1后面能匹配selector2的兄弟节点
1.8、选择器组合
selector1，selector2，selector3｛…｝
后面的花括号对应css会对前面所有选择器匹配的元素起作用

常见状态伪类选择器
selector：link：匹配selector选择器且未被访问前的元素（超链接 )
selector：visited：匹配selector选择器且已被访问过的元素（超链接 )
selector：active:匹配selector选择器且处于激活状态（鼠标点击与释放）
selector：hover：匹配selector选择器且鼠标处于悬停
selector：focus：匹配selector选择器且得到焦点
selector：disabled：匹配selector选择器且当前处于不可用状态
selector：default：匹配selector选择器且页面打开处于选中状态
2、常用结构性伪类选择器
Selector：first-child：匹配符合Selector选择器，而且必须是其父元素的第一个子节点元素
Selector：last-child：匹配符合Selector选择器，而且必须是其父元素的最后一个子节点元素
Selector：nth-child(n)：匹配符合Selector选择器，而且必须是其父元素的第n个子节点元素
Selector：nth-last-child(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点元素
Selector：nth-child(odd/even)：匹配符合Selector选择器，而且必须是其父元素的第奇数个/偶数个子节点的元素
Selector：nth-child(xn+y)：匹配符合Selector选择器，而且必须是其父元素的第xn+y个子节点元素

注：css中带 - 的属性在js中要变成驼峰命名法
例：background-color -------> backgroundColor