-
基本选择器语法
选择器 |
类型 |
功能描述 |
* |
通配选择器 |
选择文档中所有HTML元素 |
E |
元素选择器 |
选择指定类型的HTML元素,p{} |
#id |
ID选择器 |
选择指定ID属性值为“id”的任意类型元素 |
.class |
类选择器 |
选择指定class属性值为“class”的任意类型的任意多个元素 |
没啥好说的,基本操作
-
层次选择器语法
选择器 |
类型 |
功能描述 |
E F |
后代选择器(包含选择器) |
选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F |
子选择器 |
选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素 |
E+F |
相邻兄弟选择器 |
选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面 |
E~F |
通用选择器 |
选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
案例:
后代选择器:
将该元素的儿子辈,孙子辈的都包括
子选择器:这里不要用背景色,因为父类会连同子类覆盖
只选择标签的孩子标签
相邻兄弟选择器:
选择同目录下的第一个兄弟
通用选择器:
选择该标签下所有的,包括子类,孙子类。
-
动态伪类选择器语法
选择器 |
类型 |
功能描述 |
E:link |
链接伪类选择器 |
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 |
E:visited |
链接伪类选择器 |
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 |
E:active |
用户行为选择器 |
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上 |
E:hover |
用户行为选择器 |
选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
E:focus |
用户行为选择器 |
选择匹配的E元素,而且匹配元素获取焦点 |
对于这四个锚点伪类的设置,有一点需要特别注意,那就是他们的先后顺序,要让他们遵守一个爱恨原则LoVe/Hate,也就是Link--visited--hover--active。
- :hover用于当用户把鼠标移动到元素上面时的效果;
- :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
- :focus用于元素成为焦点,这个经常用在表单元素上。
-
UI元素状态伪类选择器语法
选择器 |
功能描述 |
E:checked |
选择被选中的input元素(只用于单选按钮和复选框) |
E:enabled |
选择启用状态的元素 |
E:disabled |
选择禁用状态的元素 |
E:default |
选择默认元素 |
E:valid |
根据输入验证选择有效或者无效的input元素 |
E:in-range/:out-of-range |
选择在制定范围之内或者职位受限的input元素 |
E:required/:optional |
根据是否允许:required属性选择input元素 |
-
结构伪类选择器使用语法
选择器 |
功能描述 |
E:first-child |
作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
E:last-child |
作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 |
E:root |
选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同 |
E F:nth-child(n) |
选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0. |
E F:nth-last-child(n) |
选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同 |
E:nth-of-type(n) |
选择父元素内具有指定类型的第n个E元素 |
E:nth-last-of-type(n) |
选择父元素内具有指定类型的倒数第n个E元素 |
E:first-of-type |
选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同 |
E:last-of-type |
选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同 |
E:only-child |
选择父元素只包含一个子元素,且该子元素匹配E元素 |
E:only-of-type |
选择父元素只包含一个同类型子元素,且该子元素匹配E元素 |
E:empty |
选择没有子元素的元素,而且该元素也不包含任何文本节点 |
-
伪元素选择器
E:first-letter/E::first-letter:设置对象内的第一个字符的样式
E:first-line/E::first-line:设置对象内的第一行的样式
E:before/E::before:设置在对象前发生的内容,用来和content属性一起使用
E:after/E::after:设置在对象后发生的内容,用来和content属性一起使用
E::selection:设置对象被选中时的颜色
-
属性选择器
- E[attr]:只使用属性名,但没有确定任何属性值;
- E[attr="value"]:指定属性名,并指定了该属性的属性值;
- E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
- E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
- E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
- E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
- E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);