css选择器汇总
类型选择器
类选择器（class）
- step1：在html标签内写class=“名”
- step2：在style内写 . 名{声明；声明；...}
- 可取多个类名
id选择器
- 具有唯一性，一个id名只能取、用一次，且取名不能用标签和属性名
- 多用于锚点
伪类选择器
- a:link{color：red；} /* 未访问的链接状态*/
- a:visited{color：green；} /* 已访问的链接状态*/
- e:hover{color：blue；} /* 鼠标滑过元素时的状态*/
- e:active{color：yellow；} /* 鼠标按下时的元素状态*/
- input：focus{声明；} /* 元素获取焦点执行样式*/
通配符 *
-
- {声明；} 常用于重置样式，例：* {margin：0；padding：0；}
群组选择器
- 选择器1 ，选择器2 ，...，选择器n{属性：属性值；}
- 例： #nav，.top，p {width：100px；}
包含选择器
- 父选择器 子选择器 {属性：属性值；}
- 父子选择器之间用空格隔开
- 例：div ul li {height：200px；} 或 .logo .common {background:#fff;}
子代选择器 >
- 只选中第一代孩子
- 例：.nav > li {...;}
结构伪类选择器
- X:first-child 匹配子集的第一个元素。IE7就可以支持
- X:last-child匹配父元素中最后一个X元素
- X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
- X:nth-last-child(n) 从最后一个开始算索引。
- X:first-of-type匹配同级兄弟元素中的第一个X元素
- X:last-of-type **匹配同级兄弟元素中的最后一个X元素
- X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
- X:only-of-type匹配属于同类型中唯一兄弟元素的X
- X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
目标伪类选择器
- E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
- UI 元素状态伪类选择器E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素 E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E::selection 匹配E元素中被用户选中或处于高亮状态的部分
属性选择器
- E[attr]：只使用属性名，但没有确定任何属性值
- E[attr=“value”]：指定属性名，并指定了该属性的属性值
- E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的
- E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
- E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value
伪元素选择器
- ::before 永远在父元素盒子的开头
- ::after 永远在父元素盒子的最后
- ::first-letter 选中第一行第一个字
- ::first-line 选中第一行
- 例：div::before {content:"";}
层级选择器
- E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
- E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
- E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
