#id
.class
标签选择器:
* 任何元素
E 与E标签结合的任何元素
E F E的所有派生标签中，有F标签的元素
E > F 或者 E/F E的所有直接的拥有F标签的子类
E + F 所有具有F标签的元素，紧靠的前一个元素有E标签
E ~ F 所有具有F标签的元素，前一个兄弟元素有E标签
属性选择器:
@和引号是可选项。例如，div[@foo='bar']也是一个合法的属性选择子。
E[foo] 有一个属性："foo"
E[foo=bar] 有一个等于"bar"的属性"foo"
E[foo^=bar] 有一个以"bar"开头的属性"foo"
E[foo$=bar] 有一个以"bar"结束的属性"foo"
E[foo*=bar] 有一个包含"bar"子字符串的属性"foo"
E[foo%=2] 有一个能被2整除的属性"foo"
E[foo!=bar] 有一个不等于"bar"的属性
伪类:
E:first-child E是其父亲的第一个孩子
E:last-child E是其父亲的最后一个孩子
E:nth-child(n) E是其父亲的第n个孩子(从1开始递增)
E:nth-child(odd) E是其父亲的奇数个孩子
E:nth-child(even) E是其父亲的偶数个孩子
E:only-child E是其父亲唯一的孩子
E:checked E是一个有选择属性的元素，并且其选中状态为true(例如一个radio或者checkbox)
E:first 结果集中的第一个E元素
E:last 结果集中的最后一个E元素
E:nth(n) 结果集中的第n个E元素(从1开始)
E:odd nth-child(奇数)的简写
E:even nth-child(偶数)的简写
E:contains(foo) E的innerHTML，包含"foo"子字符串
E:nodeValue(foo) 包含一个textNode的E，textNode有一个等于"foo"的nodeValue
E:not(S) 一个与简单的S选择子不相等的E元素
E:has(S) 一个E元素，拥有与简单的S选择子匹配的派生类
E:next(S) 一个E元素，它的下一个兄弟节点与简单的S选择子相匹配
E:prev(S) 一个E元素，它的上一个兄弟节点与简单的S选择子相匹配
CSS值选择器:
E{display=none} css值"display"等于"none"
E{display^=none} css值"display"以"none"开始
E{display$=none} css值"display"以"none"结束
E{display*=none} css值"display"包含子字符串"none"
E{display%=2} css值"display"可以被2整除
E{display!=none} css值"display"不等于"none"
复合选择器：
后代选择器： p span {font-size: 14px;} 选择p元素的所有子孙元素中的span元素
子女选择器： p>span {font-size: 14px;} 选择p元素的所有子女元素中的span元素
组合选择器： p#start {font-size: 14px;} 选择id为start的p元素(交集)
群组选择器： em, .even {font-size: 14px;} 选择em元素或者类名为even的元素
相邻兄弟选择器： h1 + p {color:red;} 选择h1之后的相邻兄弟元素(必须为p元素
后续兄弟选择器： h1 ~ p {color:red;} 选择在 h1之后所有兄弟元素中的p元素
否定选择器： p:not(#start){ color:red;} 选择所有id不是start的p元素
nth-child选择器(结构伪类)：
p:first-child {color:red;} p的双亲的第一个子女
p:last-child {color:red;} p的双亲的最后一个子女
p:only-child {color:red;} p的双亲的唯一一个子女
p:nth-child(5) {color:red;} p的双亲的第5个子女
p:nth-child(even) color:red;} p的双亲的第偶数个子女 (奇数:odd)
p:nth-child(3n+1) {color:red;} p的双亲的选择第1、 4、 7、 ...个子女
p:nth-last-child(5) {color:red;} p的双亲的倒数第5个子女
nth-of-type选择器(结构伪类) ：
p:first-of-type {color:red;} p的双亲的第一个子女(只计算p元素)
p:last-of-type {color:red;} p的双亲的最后一个子女
p:only-of-type {color:red;} p的双亲的唯一一个子女
p:nth-of-type(5) {color:red;} p的双亲的第5个子女
p:nth-of-type(odd) {color:red;} p的双亲的第奇数个子女 (even,odd)
p:nth-of-type(3n) {color:red;} p的双亲的选择第3、 6、 ...个子女
p:nth-last-of-type(5) {color:red;} p的双亲的倒数第5个子女
nth-child的其它用法：
:nth-child(n+6) 选中从第6个开始的子元素
:nth-child(-n+9) 选中从第1个到第9个子元素
:nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素
:nth-child(n+2):nth-child(-n+9):nth-child(odd) 选中的子元素是从第2位到第9位，并
且只包含奇数位。
伪类与伪元素
CSS伪类：用于向某些选择器添加特殊的效果。
伪类 作用
:hover 将样式添加到鼠标悬浮的元素
:active 将样式添加到被激活的元素
:focus 将样式添加到获得焦点的元素
:link 将样式添加到未被访问过的链接
:visited 将样式添加到被访问过的链接
:first-child 将样式添加到元素的第一个子元素
:lang 定义指定的元素中使用的语言
CSS伪元素：用于将特殊的效果添加到某些选择器。
伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪元素 作用
::first-letter
将样式添加到文本的首字母
::first-line 将样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入某些内容
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
2、CSS3新增伪类
新增伪类 作用
p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
p:only-child 选择属于其父元素唯一的子元素的每个p元素。
p:nth-child(n)
选择属于其父元素的第n个子元素的每个p元素。
p:nth-last-child(n)
选择属于其父元素的倒数第n个子元素的每个p元素。
p:nth-of-type(n)
选择属于其父元素第n个p元素的每个p元素。
p:nth-last-of-type(n)
选择属于其父元素倒数第n个p元素的每个p元素。
p:last-child
选择属于其父元素最后一个子元素的每个p元素。
p:empty
选择没有子元素的每个p元素（包括文本节点）。
p:target 选择当前活动的p元素。
:not§选择非p元素的每个元素。
:enabled控制表单控件的可用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
