基本选择器
-
通配符选择器（*）
-
用来选择所有元素 * {}
-
也可以选择某个元素下的所有元素 .dov*{}
-
元素选择器（E） li {}
-
类选择器（.class）
-
ID选择器（#id)
-
群组选择器（selector1,selector2,...,selectorN）并集
层次选择器
-
后代选择器（E F）
-
子元素选择器（E > F）
-
相邻兄弟元素选择器（E + F）
-
通用兄弟选择器（E ~ F）
属性选择器
-
E[attr] 用于选取带有指定属性的元素,也可以使用多属性进行选择元素E[attr1][attr2]
-
E[attribute=value] 用于选取带有指定属性和值的元素,属性和属性值必须完全匹
-
E[attribute~=value] 选取属性值中包含指定词汇的元素
-
E[attribute^=value] 匹配属性值以指定 value 值开头的每个元素
-
E[attribute$=value] 匹配属性值以指定 value 值结尾的每个元素
-
E[attribute*=value] 匹配属性值中包含指定 value 值的每个元素
-
E[attribute|=value] 选择 attr 属性值等于 value 或以 value- 开头的所有元素
伪类选择器
-
a:link
-
a:visited
-
a:hover
-
a:active
UI元素状态伪类选择器
-
":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类，这些主要是针对于 HTML 中的 Form 元素操作
1 /** 下面对所不可用的文本框设置样式 **/ 2 input[type="text"]:disabled { 3 cursor: not-allowed; 4 } 5 /** 下面对所选中的的复选框设置样式 **/ 6 input[type="checkbox"]:checked { 7 background-color:pink; 8 }
伪类选择器
-
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点
-
E:first-child 用来选择某个元素的第一个子元素，与 E:nth-child(1) 等同
-
E:last-child 选择是的某个元素的最后一个子元素，与 E:nth-last-child(1) 等同
-
E F:nth-child(n) 选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）
-
E F:nth-last-child(n) 选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）
-
E:only-child 选择父元素只包含一个子元素，且该子元素匹配 E 元素
-
E:nth-of-type(n) 类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
-
E:first-of-type 类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
-
E:last-of-type 类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
-
E:nth-last-of-type(n) 类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
-
E:only-of-type 类似于 E:only-child，只不过它选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素
否定伪类选择器
-
:not 匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器
1 /** 对form中所有input加边框，但又不想submit也起变化 **/ 2 input:not([type="submit"]) { 3 border: 1px solid red; 4 }
伪元素
-
::first-line 选择元素的第一行
-
::first-letter 选择文本块的第一个字母，除非在同一行里面包含一些其它元素,主要运用于段落排版。
-
::before和::after 给元素的前面或后面插入内容
-
常用的便是是清除浮动 .box::after {clear: both;}
-
与"content"配合使用，可以实现许多特效
-
::selection 用来改变浏览网页选中文的默认效果
-
只能设置两个属性,一个就是 background,另一个就是 color 属性