/ CSS  

伪类和伪元素

伪类和伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

  • 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

伪类和伪元素的根本区别在于：它们是否创造了新的元素,, 这个新创造的元素就叫 “伪无素” 。

##伪类

伪类前面是一个冒号，E:first-child会对现有的元素进行筛选

  • :link:选择未访问的链接

  • :visited:选择已访问的链接

  • :hover:选择鼠标指针浮动在其上的元素

  • :active:选择活动的链接

  • :focus:选择获取焦点的输入字段

  • :not():一个否定伪类，用于匹配不符合参数选择器的元素。

  • :first-child:匹配元素的第一个子元素。

  • :last-child:匹配元素的最后一个子元素。

  • :first-of-type:匹配属于其父元素的首个特定类型的子元素的每个元素。

  • :last-of-type:匹配属于其父元素的最后一个特定类型的子元素的每个元素。

  • :nth-child::nth-child根据元素的位置匹配一个或者多个元素，它接受一个 an+b 形式的参数，an+b 匹配到的元素

  • :nth-last-child::nth-last-child 与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。

  • :nth-of-type::nth-of-type 与 nth-child相似，不同之处在于它是只匹配特定类型的元素。

  • :nth-last-type::nth-last-of-type 与 nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。

  • :only-child :当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。

  • :target :当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。

  • :checked::checked匹配被选中的 input 元素，这个 input 元素包括 radio 和 checkbox。

  • :default: 匹配默认选中的元素

  • :disabled: 匹配禁用的表单元素。

  • :empty :匹配没有子元素的元素

  • :enabled: 匹配没有设置 disabled 属性的表单元素。

  • :in-range: 匹配在指定区域内元素。

  • :out-of-range: 与:in-range相反，它匹配不在指定区域内的元素。

  • :indeterminate:indeterminate 的英文意思是“ 不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate 匹配该组中所有的单选框或复选框。

  • :valid :匹配条件验证正确的表单元素。

  • :invalid: 与:valid 相反，匹配条件验证错误的表单元素。

  • :optional:匹配是具有 optional 属性的表单元素。当表单元素没有设置为 required 时，即为 optional 属性。

  • :required: 与:optional相反匹配设置了 required 属性的表单元素。

  • :read-only: 匹配设置了只读属性的元素，表单元素可以通过设置“readonly” 属性来定义元素只读。

  • :read-write: 匹配处于编辑状态的元素。input，textarea 和设置了 contenteditable 的 HTML 元素获取焦点时即处于编辑状态。

  • :scope: 匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用。

  • :dir:匹配指定阅读方向的元素，当 HTML 元素中设置了 dir 属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和 rtl（从右往左）。目前，只有火狐浏览器支持:dir 伪类，并在火狐浏览器中使用时需要添加前缀 ( -moz-dir() )。

  • :lang:匹配设置了特定语言的元素，设置特定语言可以通过为了 HTML 元素设置 lang=”” 属性，设置 meta 元素的 charset=”” 属性，或者是在 http 头部上设置语言属性。

    实际上，lang=”” 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。

  • :root:匹配文档的根元素。一般的 html 文件的根元素是 html 元素，而 SVG 或 XML 文件的根元素则可能是其他元素。
  • :fullscreen: 匹配处于全屏模式下的元素。全屏模式不是通过按 F11 来打开的全屏模式，而是通过 Javascript 的 Fullscreen API 来打开的，不同的浏览器有不同的 Fullscreen API。目前，:fullscreen 需要添加前缀才能使用。

img

##伪元素

伪元素前面是两个冒号，E::first-line会创造出不存在的新元素，由于css对单冒号的伪元素也支持，所以这样很容易让新学者混淆。但实际上现在css3已经明确规定了伪类单冒号，伪元素双冒号的规则。

  • ::before/:before在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。

  • ::after/:after 在被元素后插入内容，其用法和特性与:before相似。

    对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL:

    content: url('img/icon.png')

  • ::first-letter/:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中

  • ::first-line/:first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。

  • ::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。

  • ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

    伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。

  • ::backdrop 用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式

注意：

  • 配合伪类使用
    • 伪元素 :before 还可以配合伪类使用，这里举经常与 :before 配合使用的伪类 :hover 为例：
1
2
.before:hover:before{content:'you before'; color:red;}
<div class="before"> me</div>
  • 配合取值函数 attr() 使用
1
2
3
4
5
a::before{content: attr(title)}
<a href="https://blog.ihoey.com" title="梦魇小栈"></a>

效果
<a href="https://blog.ihoey.com" title="梦魇小栈">梦魇小栈</a>

img