简单概括一下CSS的选择器
基本选择器
| * | 通配符选择器 | 选择所有元素 |
|---|---|---|
| E | 元素选择器 | 文档元素 |
| .class | 类选择器 | 选择一个类下的所有元素 |
| #id | ID选择器 | 选择一个id下的所有元素 |
| E F | 后代选择器 | 可以选择某个元素的后代元素 |
| E > F | 子元素选择器 | 选择直接的子元素(不包含后代元素) |
| E + F | 相邻兄弟元素选择器 | 选择紧接一个元素后的元素(在 e,f具有相同的父元素,且相邻) |
| E ~ F | 通用兄弟元素选择器 | 选择相邻元素后的所有元素 |
属性选择器
| E[attr] | 筛选具有attr属性的元素 |
|---|---|
| E[attr="value"] | 筛选具有attr属性,且该属性的值为value的元素 |
| E[attr~="value"] | 属性值为用空格分隔的字词列表，其中一个等于value的元素(包含只有一个值且该值等于val的情况) |
| E[attr^="value"] | 筛选attr属性值以value开头的元素 |
| E[attr$="value"] | 筛选attr属性值以value结尾的元素 |
| E[attr*="value"] | 筛选attr属性值中包含value的元素 |
| E[attr|="value"] | 筛选attr属性值以val开头并且其后紧跟着 “-” 的元素 |
伪类选择器
动态伪类
常用的四个锚点伪类
| :link | 选取未被访问的链接 |
|---|---|
| :hover | 用于当用户把鼠标移动到元素上面时的效果 |
| :active | 用于用户点击元素那一下的效果 |
| :focus | 用于元素成为焦点(表单元素上常用) |
UI元素状态伪类
-
:enabled与：disabled
表单元素中的可用与不可用的两种状态
-
:checked
状态选择器
PS:IE6至IE8均不支持以上三种选择器
nth选择器
CSS3结构类,CSS的新特性,一种支持变量计算的选择器,可以实现复杂的选择需求
| :first-child | 选择某个元素的第一个子元素 |
|---|---|
| :last-child | 选择某个元素的最后一个子元素 |
| :nth-child() | 选择某个元素的一个或多个特定的子元素 |
| :nth-last-child() | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算 |
| :nth-of-type() | 选择指定的元素 |
| :nth-last-of-type() | 选择指定的元素，从元素的最后一个开始计算 |
| :first-of-type | 选择一个上级元素下的第一个同类子元素 |
| :last-of-type | 选择一个上级元素的最后一个同类子元素 |
| :only-child | 选择的元素是它的父元素的唯一一个了元素 |
| :only-of-type | 选择一个元素是它的上级元素的唯一一个相同类型的子元素 |
| :empty | 选择的元素里面没有任何内容 |
否定选择器
:not, 选择器匹配非指定元素/选择器的每个元素。
PS:IE6-8不支持
伪元素
| ::first-line | 选择元素的第一行 |
|---|---|
| ::first-letter | 选择文本块的第一个字母 |
| ::before | 在元素前插入内容 |
| ::after | 在元素后插入内容 |
| ::selection | 用来改变浏览网页选中文的默认效果 |
PS:CSS3中用两个":"代表伪元素,若同时想兼容老的浏览器,最好还是使用一个":",但像CSS3的新伪元素(如::selection)还是要用来两冒号
网友评论