zoukankan      html  css  js  c++  java
  • 伪类与伪元素的区别

    伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。区别总结如下:

    CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
    属性 描述
    :active 向被激活的元素添加样式
    :focus 向拥有键盘输入焦点的元素添加样式
    :hover 当鼠标悬浮在元素上方时,向元素添加样式
    :link 向未被访问的链接添加样式
    :visited 向已被访问的链接添加样式
    :first-child 向元素的第一个子元素添加样式
    :lang 向带有指定lang属性的元素添加样式

    备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。

     css伪元素 (Pseudo-elements):用于向某些选择器设置特殊效果,是对元素中的特定内容进行设置和操作,操作层次比伪类更深,故动态性比伪类要差。

    属性 描述
    :first-letter 向文本的第一个字母添加特殊样式
    :first-line 向文本的首行添加特殊样式
    :before 在元素之前添加内容
    :after 在元素之后添加内容

     w3c 对两者的定义:

    • CSS 伪类用于向某些选择器添加特殊的效果。
    • CSS 伪元素用于将特殊的效果添加到某些选择器。

    区别

    这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

    p>i:first-child {color: red}
    <p>
        <i>first</i>
        <i>second</i>
    </p>

     //伪类 :first-child 添加样式到第一个子元素
    如果我们不使用伪类,而希望达到上述效果,可以这样做:

    .first-child {color: red}
    <p>
        <i class="first-child">first</i>
        <i>second</i>
    </p>

    即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看伪元素:

    p::first-letter {color: red}
    <p>I am stephen lee.</p> 

    //伪元素 ::first-letter 添加样式到第一个字母
    那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?

    .first-letter {color: red}
    <p><span class='first-letter'>I</span> am stephen lee.</p>

    即我们给第一个字母添加一个 span,然后给 span 增加样式。
    两者的区别已经出来了。那就是:

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

    总结

    伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

    :Pseudo-classes
    ::Pseudo-elements

    但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

  • 相关阅读:
    1767:字符合并
    成绩单
    floj 2264
    floj 2265 【lxs Contest #141】航海舰队
    CF932D Tree
    1745:分组
    1744:跳台阶
    Xamarin.Forms之跨平台性能
    Xamarin.Forms之部署和测试(性能)
    Xamarin.Forms数据绑定
  • 原文地址:https://www.cnblogs.com/qwerds/p/7066705.html
Copyright © 2011-2022 走看看