基础选择器
选择器格式 | 选择器名称 | 描述 |
---|---|---|
* | 通配选择器 | 选择所有标签作为选择器 |
E | 标签选择器 | 选择E标签作为选择器 |
E.myclass | 类选择器 | 选择类名为myclass的E标签作为选择器 |
E#myid | id选择器 | 选择id值为myid的E标签作为选择器 |
通配符选择器(Universal Selector)
语法:* { sRules }
说明:选定所有对象。
通常不建议使用通配选择符,因为它会遍历并命中文档中所 有的元素,出于性能考虑,需酌情使用
标签选择器(Type Selector)
语法:E { sRules }
说明:以文档语言对象类型(标签名)作为选择符。
类选择器
语法:E.myclass { sRules }
说明:以class属性包含myclass的E对象(class=myclass)作为选择符。
不同于ID选择符的唯一性,类选择符可以同时定义多个
id选择器
语法:E#myid { sRules }
说明:以唯一标识符id属性等于myid的E对象(id=myid)作为选择符。
高级选择器
关系选择器
选择器格式 | 选择器名称 | 描述 |
---|---|---|
E F | 后代选择器 | 选择所有被E元素包含的F元素。 |
E>F | 子代选择器 | 选择所有作为E元素的子元素F。 |
E+F | 下一个兄弟选择器 | 选择紧贴在E元素之后兄弟F元素。 |
E~F | 所有兄弟选择器 | 选择E元素所有兄弟元素F。 |
E F:包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子…
E>F:子选择符只能命中子元素,而不能命中孙辈。
E+F:选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。
E~F:选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。
属性选择器
选择器格式 | 描述 |
---|---|
E[att] | 选择具有att属性的E元素。 |
E[att=“val”] | 选择具有att属性且属性值等于val的E元素。 |
E[att~=“val”] | 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。 |
E[att^=“val”] | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
E[att$=“val”] | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
E[att*=“val”] | 选择具有att属性且属性值为包含val的字符串的E元素。 |
E[att=“val”] | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。 |
伪类选择器
选择符 | 描述 |
---|---|
E:link | 设置超链接a在未被访问前的样式。 |
E:visited | 设置超链接a在其链接地址已被访问过时的样式。 |
E:hover | 设置元素在其鼠标悬停时的样式。 |
E:active | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 |
E:focus | 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。 |
E:lang(fr) | 匹配使用特殊语言的E元素。 |
E:not(s) | 匹配不含有s选择符的元素E。 |
E:root | 匹配E元素在文档的根元素。 |
E:first-child | 匹配父元素的第一个子元素E。 |
E:last-child | 匹配父元素的最后一个子元素E。 |
E:only-child | 匹配父元素仅有的一个子元素E。 |
E:nth-child(n) | 匹配父元素的第n个子元素E。 |
E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E。 |
E:first-of-type | 匹配父元素下第一个类型为E的子元素。 |
E:last-of-type | 匹配父元素下的所有E子元素中的倒数第一个。 |
E:only-of-type | 匹配父元素的所有子元素中唯一的那个子元素E。 |
E:nth-of-type(n) | 匹配父元素的第n个子元素E。 |
E:nth-last-of-type(n) | 匹配父元素的倒数第n个子元素E。 |
E:empty | 匹配没有任何子元素(包括text节点)的元素E。 |
E:checked | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
E:enabled | 匹配用户界面上处于可用状态的元素E。 |
E:disabled | 匹配用户界面上处于禁用状态的元素E。 |
E:target | 匹配相关URL指向的E元素。 |
- love hate准则:link - visited - hover - active 必须遵守此准则,否则部分属性无效
- E:nth-child(n) { sRules }
匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。 其他类似。- E:nth-of-type(n) { sRules }
匹配父元素的第n个子元素E。
首先,因为匹配的是父元素的子元素,这意味着E元素必须作为某个元素的子元素存在(E元素的父元素最高是html,也就是说E元素最高是body,这表示任何非html的元素都符合这个约束,因为html元素是根元素。)
其次,匹配的是父元素的第n个为E的子元素(被命中的不一定是第n个子元素,因为匹配的不是第n个子元素,而是第n个为E的子元素)
再次,只能匹配与E元素同级的元素,即:E元素的兄弟元素
伪元素选择器
选择符 | 描述 |
---|---|
E:first-letter/E::first-letter | 设置对象内的第一个字符的样式。 |
E:first-line/E::first-line | 设置对象内的第一行的样式。 |
E:before/E::before | 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 |
E:after/E::after | 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 |
E::placeholder | 设置对象文字占位符的样式。 |
E::selection | 设置对象被选择时的颜色。 |
2020/11/09