CSS之伪类/伪元素
CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
什么是伪类，伪元素？
- 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
- 伪元素：之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素且伪元素的结构在控制台无法审查。
伪类的分类：状态伪类和结构性伪类
- 状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类主要包括：
- :link 应用于未被访问过的链接；
- :hover 应用于鼠标悬停到的元素；
- :active 应用于被激活的元素；
- :visited 应用于被访问过的链接，与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
- 结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
常见的结构性伪类包括：
- :first-child 选择某个元素的第一个子元素；
- :last-child 选择某个元素的最后一个子元素；
- :nth-child() 选择某个元素的一个或多个特定的子元素；
- :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type() 选择指定的元素；
- :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
- :first-of-type 选择一个上级元素下的第一个同类子元素；
- :last-of-type 选择一个上级元素的最后一个同类子元素；
- :only-child 选择的元素是它的父元素的唯一一个子元素；
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :empty 选择的元素里面没有任何内容。
- :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
- :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
- :disabled匹配禁用的表单元素。
- :enabled匹配没有设置disabled属性的表单元素。
- :valid匹配条件验证正确的表单元素。
常见的伪元素选择器：
- ::first-letter 选择元素文本的第一个字（母）。
- ::first-line 选择元素文本的第一行。
- ::before 在元素内容的最前面添加新内容。
- ::after 在元素内容的最后面添加新内容。
- ::selection匹配用户被用户选中或者处于高亮状态的部分
- ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
注意：你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
伪元素的应用：通常用于生成图形及特殊样式
- 清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
代码如下：
- .clear::after {
- content: '';
- display: block;
- clear: both;
- }
- 画分割线：画一条如下的分割线
代码如下：
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .spliter::before, .spliter::after {
- content: '';
- display: inline-block;
- border-top: 1px solid black;
- width: 200px;
- margin: 5px;
- }
- style>
- head>
- <body>
- <p class="spliter">分割线p>
- body>
伪元素注意点：
1.伪元素:before和:after添加的内容默认是inline元素。
2.这两个伪元素的content属性，表示伪元素的内容,且必须设置其content属性，否则伪元素就不起作用。
content属性的值,具体有以下几种情况：
字符串，字符串作为伪元素的内容添加到主元素中注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出
attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。
url()/uri(), 引用外部资源，例如图片；counter(), 调用计数器，可以不使用列表元素实现序号问题。
3.伪元素不属于文档，不占用dom元素节点所以js无法操作它。
4.伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件。
5.不止块级元素才能有:before, :after，大部分行级元素也可以设置伪元素，但是像img可置换元素，因为其外观和尺寸由外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。
假设需求：信息框里有文字和图形，图形是倒三角，能根据不同状态可以有不同的颜色，它的作用就是直观的告诉使用者，这条消息的状态是草稿/已发布/通过/检查中/退回/成功。
那么实现它就能有两种，一是 伪元素::after+定位，伪元素能轻松实现倒三角，定位是用来控制倒三角位置，若位置没要求则不需要定位，这样能很方便的在不大改动代码的情况下随意更改背景色；二是 将图形作为背景图插入，借用vue中的动态类名 :class,可根据传入的不同参数来改变类名(可通过switch实现)，不同类名再对应不同的背景图。如果多地方使用，还可以封装成组件的形式。
伪元素的优缺点：
优点
- 减少dom节点数
- 让css帮助解决部分js问题，让问题变得简单
缺点
- 不利于SEO
- 无法审查元素，不利于调试
贴个链接：汇集了几十种常见的css图形及代码
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！