伪类: Pseudo-classes
- 定义: 在CSS中，伪类选择器根据元素的状态而不是文档树中的信息来为其指定目标。(源自:MDN文档)
- 作用: 向某些选择器添加特殊的效果
- 语法: E: link | visited | ... { property: value;}
文档关键字解读
根据元素的状态
文档关键词中有:"根据"这个词,这就意味着 伪类 自带一种 "被动光环",
也就是说 它不会主动触发, 只有当某种条件成立以后,才会'被迫'出来清扫战场 -> 也就是 呈现某种状态.
下面是所有伪类的清单图: (来源链接:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
11122.png
上面MDN文档 毫无人性 的把所有 伪类 从A-Z 给罗列出来,
让人 不明觉厉,进而让人 敬而远之. 但是么得关系,
我们可以运用 | 真·分类无双 | 卍大法 来给它送上爱心SM套餐.
- [ ] 注: 以下分类是按 常用度 重要度 来分先后顺序.
静态伪类: 用于超链接样式 比如a标签
a: link { ...} /* 超链接点击 之前 的元素样式 */
a: visited {...} /* 被访问过 之后 的元素样式 */
动态伪类: 所有标签都适用的样式
E: hover {...} /* 鼠标放到标签上的时候 */
E: active {...} /* 鼠标点击标签，但是不松手时 */
E: focus {...} /* 是某个标签获得焦点时的样式（比如某个输入框获得焦点） */
注意:
- 如果一个元素同时有: link , visited , hover , active 的顺序是固定的,不能乱来. 因为他们之间存在 逻辑先后,不能更改.
- a:link、a:visited这两个伪类的时候，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。
结构伪类: 用于匹配指定的目标子元素
E: nth-child(n) {...} /* 匹配属于E父元素的第 N (大于等于1的整数) 个子元素，不论元素的类型
匹配步骤解析:① 根据E自身->通过DOM树定位到父元素.
② 其父元素扫描自己的所有子元素(不分类型),给他们按顺序从1开始编号.
③ 在依据(n)的值,寻找到编号为n的子元素
*/
E: nth-last-child(n) {...} /* 匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
与上面nth:child逻辑步骤相同,只不过倒过来而已.
*/
E:nth-of-type(n) {...} /* 匹配属于父元素的特定类型的 第N个 子元素的 每个元素(如果有多个父容器) */
E:nth-last-of-type(n) {...} /* 匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数 */
E:first-child {...} /* 匹配属于 其父元素 的首个子元素的指定选择器 */
E:last-child {...} /* 匹配属于 其父元素 的最后一个子元素的每个元素 */
E:only-child {...} /* 匹配属于 其父元素 的 唯一 子元素的每个元素(也就是 所有父容器 下符合E元素类型 且 只有一个'独苗') */
E:first-of-type {...} /* 匹配属于 其父元素 下跟元素E type类型一致的首个子元素(可以是多个,如果有多个父容器) */
E:last-of-type {...} /* 匹配属于 其父元素 下跟元素E type类型一致的 倒数最后一个的子元素(可以是多个,如果有多个父容器) */
E:only-of-type {...} /* 匹配属于其父元素的特定类型的唯一子元素的每个元素(父容器下可以有多个子元素,但符合E type类型的子元素只有一个) */
E:empty {...} /* 选择没有子元素的元素，且不包含节点, 也就是空壳标签 */
E:root {...} /* 匹配元素所有在文档的根元素 也就是 html标签,一般很少用到 */
否定伪类: 用来匹配 非指定 元素/选择器的每个元素
E:not(selector) {...} /* 选中E标签或容器下的符合selector标记的所有元素 */
目标伪类: 用来匹配页面URI
(标识、定位任何资源的字符串)中某一个标识符的目标元素
E: target { ... } /* 选择匹配E的所有元素，且匹配元素被相关URL指向 */
语言伪类: 用来匹配使用指定语言的元素
E:lang(language){ ... } /* 向带有指定 lang 属性开始的元素添加样式 ,使用频率低 */
伪元素: Pseudo-elements
- 定义: CSS伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。(源自:MDN文档)
- 作用: 用于设置所选元素的特定部分的样式
- 语法: selector::pseudo-element {property: value;}
文档关键字解读
**添加/设置所选元素特定部分 **
文档关键词中有:"添加/设置"这个词,这就表示 伪元素是一种 "增量 或 元素本来就有的一部分.""
也就是说 把 元素当做一个 可操作的物体,可以给这个物体附着新零件 或 拆出部分零件来修理-->进行样式设置.
下面是所有伪类的清单图: (来源链接:下面是所有伪类的清单图: (来源链接:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes))
22221111.png
下面介绍几个常用的:
- 注意 伪元素是css3新增的功能选择器, 最好选择器 和 伪类元素 需用 两个 : 隔开,才符合规范.
E::after | ::before { ... } /* 用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入 ,所以尽量使用它们显示修饰性内容
常用来 清除浮动*/
E::selection { ... } /* 应用于文档中被用户选中高亮的部分(比如鼠标划选的文字) */
E::first-letter { ... } /* 选中整块文字第一行的第一个字(中英文皆可), 且文字之前没有其他内容,
E::first-line { ... } /* 将样式只应用于元素的首行 */
网友评论