基本选择器

通配符*

*就表示所有元素。效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

标签选择器

所有的标签，都可以是选择器。无论这个标签藏的多深，一定能够被选择上。

类选择器

类选择器的选择符是“.”。任何的标签都可以携带 class 属性，class 属性可以重复。同一个标签，可能同时属于多个类，用空格隔开。

  • 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
  • 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
  • 尽可能的用 class，除非极特殊的情况可以用 id。 原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以我们 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。（类上样式，id 上行为）

id 选择器

id 选择器的选择符是“#”。一个 HTML 页面，不能出现相同的 id。

标签的名字，可以任取，但是：

  • 只能有字母、数字、下划线
  • 必须以字母开头，大小写严格区别
  • 不能和标签同名。比如 id 不能叫做 body、img、a

后代选择器

空格就表示后代，.div1 p 就是.div1 的后代所有的 p。

交集选择器

选择的元素是同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。交集选择器没有空格。

h3.special {
  color: red;
}
1
2
3

交集选择器可以连续交（一般不要这么写）

h3.special.zhongyao {
  color: red;
}
1
2
3

交集选择器，我们一般都是以标签名开头，比如 div.haha

并集选择器（分组选择器）

同时选中多个符合多个选择器的元素

用逗号就表示并集。h3,li{color:red;}

儿子选择器

IE7 开始兼容，IE6 不兼容。

div>p{color:red;}div 的儿子 p。和 div 的后代 p 的截然不同。儿子选择器只能选择标签相邻的。

兄弟元素选择器

IE7 开始兼容，IE6 不兼容。 选取后一个兄弟元素: 前一个 + 后一个（必须紧跟）

h3+p{color:red;}选择上的是 h3 元素后面紧挨着的第一个兄弟。

选取后边所有的兄弟元素: 前一个 ~ 后边所有（不需要紧跟）

属性选择器

根据元素的属性选择指定元素

存在和值的属性选择器

  • [属性名] : 选取含有指定属性的元素
  • [属性名="属性值"] : 选取属性值等于指定值的元素
  • [属性名~="属性值"] : 表示带有以 属性名 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为属性值，一个时，空格可以没有

属性值的属性选择器

  • [attr|=val] : 选择 attr 属性的值是 val（包括 val）或以 val-开头的元素。
  • [attr^=val] : 选择 attr 属性的值以 val 开头（包括 val）的元素。
  • [attr$=val] : 选择 attr 属性的值以 val 结尾（包括 val）的元素。
  • [attr*=val] : 选择 attr 属性的值中包含字符串 val 的元素。

伪类与伪元素选择器

注意:link，:visited，:target 是作用于链接元素的！

链接伪类

锚点伪类

:link 表示作为超链接，并指向一个未访问的地址的所有锚

:visited 表示作为超链接，并指向一个已访问的地址的所有锚

只有下列的属性才能被应用到已访问链接： color, background-color, border-color

目标伪类

:target 代表一个特殊的元素，它的 id 是 URI 的片段标识符

:target {
  border: 2px solid #d4d4d4;
  background-color: #e5eecc;
}
1
2
3
4

动态伪类

:hover 表示悬浮到元素上

:active 表示匹配被用户激活的元素（点击按住时）

注意:hover，:active 基本可以作用于所有的元素！ie6 中不支持对超链接链接以外的元素设置:hover 和:active

由于 a 标签的:link 和:visited 可以覆盖了所有 a 标签的状态，所以当:link，:visited，:hover，:active 同时出现在 a 标签身上时 :link 和:visited 不能放在最后！！！

记住，这四种状态，在 css 中，必须按照固定的顺序写：因为 lv 已经把 a 标签的所有状态覆盖了，ha 要起作用，就要放在后面才能在起作用时覆盖全面，ha 也是同理

a:link 、a:visited 、a:hover 、a:active 如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

表单相关伪类

  • :enabled 匹配可编辑的表单
  • :disable 匹配被禁用的表单
  • :checked 匹配被选中的表单
  • :focus 匹配获焦的表单

结构性伪类

  • index 的值从 1 开始计数！！！！
  • index 可以为变量 n(只能是 n)
  • index 可以为 even odd

:nth-child(index)系列

IE8 开始兼容；IE6、7 都不兼容。

寻找父元素中的指定位置子元素,在所有的子元素中排序

#wrap ele:nth-child(index) {
} /*表示匹配#wrap中第index的子元素 */
/* 这个子元素必须是ele;;;;
如果不匹配index和ele则没有选中） */
1
2
3
4
  • :first-child : 寻找父元素的第一个元素，在所有的子元素中排序
  • :last-child : 寻找父元素的最后一个子元素,在所有的子元素中排序
  • :nth-last-child(index) : 寻找父元素中的指定位置子元素,在所有的子元素中排序，从下往上数
  • :only-child : 只能有一个子元素,相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)

nth-of-type(index)系列

和: first- child 这些非常的类似,只不过 child,是在所有的子元素中排列 而 type,是在当前类型的子元素中排列

#wrap ele:nth-of-type(index)
//表示匹配#wrap中第index的ele子元素
//除此之外:nth-child和:nth-of-type有一个很重要的区别！！
//nth-of-type以元素为中心！！！也就是前面只能是标签
1
2
3
4
  • :nth-of-type : 寻找指定类型中的指定子元素
  • :first-of-type : 寻找指定类型中的第一个子元素
  • :last-of-type : 寻找指定类型中的最后一个子元素
  • :nth-last-type(index)
  • :only-of-type : 在当前类型的子元素中排列，只能有一个子元素, 相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)

:not

从一组元素中将符合要求的元素剔除出去

div > a:not(:last-of-type) {
  border-right: 1px solid red;
}
1
2
3

:empty

内容必须是空的，有空格都不行，有属性没关系

伪元素

  • ::after
  • ::before
  • ::firstLetter : 第一个字符
  • ::firstLine : 第一行
  • ::selection : 内容被选中时的状态, 在火狐用-moz-selection 来代替

TOC