精华内容
下载资源
问答
  • 本篇文章给大家带来的内容是关于什么是伪类和伪元素?伪类和伪元素的区别的区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、伪种类 2、伪元素种类 (1)伪作用对象是...

    本篇文章给大家带来的内容是关于什么是伪类和伪元素?伪类和伪元素的区别的区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

     

    1、伪类种类

    0044-1.png

    2、伪元素种类

    0044-2.png

    (1)伪类作用对象是整个元素

    例如:

    a:link

    {color:#111}

    a:hover

    {color:#222}

    div:first-child

    {color:#333}

    div:nth-child(3)

    {color:#444}

    尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。

    (2)伪元素作用于元素的一部分

    p::first-line

    {color:#555}

    p::first-letter

    {color:#666}

    a::before

    {content : "hello

    world";}

    (3)伪元素作用于元素的一部分:一个段落的第一行或者第一个字母。

    总结:伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;而伪类没有伪造元素,例如first-child只是给子元素添加样式而已。

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

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

    以上就是对什么是伪类和伪元素?伪类和伪元素的区别的区别详解的全部介绍,希望大家可以有所收获.

    展开全文
  • CSS的伪类和伪元素

    千次阅读 2021-01-17 13:44:05
    伪元素和虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好。下面直接进入正题,尽量用最小的篇幅让人明白如何使用它们。...1.伪元素和的区别伪元素和都是为了给一些特殊需求加样式,...

    之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是如果不会使用伪类和伪元素,就跟下面的图差不多,后面会摔的。伪元素和伪类虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好。下面直接进入正题,尽量用最小的篇幅让人明白如何使用它们。

    c7dcb3008e5c

    ...

    1.伪元素和伪类的区别

    伪元素和伪类都是为了给一些特殊需求加样式,定义上基本一致。

    伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。

    已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。比如虚拟一个div

    声明不同,伪类和选择器之间用一个冒号隔开,伪元素则是两个冒号隔.

    2.常用的伪类

    常用的伪类有两类UI伪类和结构伪类。这里只介绍5个,应该足够用了。

    2.1.hover和active

    这两个属于UI伪类(link/visited/active/hover)四个中的其中两个,hover指当鼠标移动到元素上时触发某种样式;activate指鼠标按下时的某种样式。

    hover使用场景:一些可点击的列表,表格行,卡片等,鼠标放上去之后背景颜色会发生变化,就可以使用hover。

    active使用场景:按钮按下,图片按下以及一些可点击元素或者组件等的按下操作样式改变。

    下面是一个非常简单的按钮案例(在线MP4转GIF不知道这个图能存在多久,看不见的底下评论提醒我):

    c7dcb3008e5c

    按钮的hover和active

    第一个按钮当鼠标放上去是改变边框和字体颜色,第二则是在鼠标按下的时候改变背景和颜色。具体代码如下

    .btn{

    height: 34px;

    padding: 6px 12px;

    border-radius: 4px;

    font-size: 15px;

    color: rgba(0,0,0,.65);

    font-weight: 400;

    outline: none;

    border: 1px solid #cbcbcb;

    }

    .btn:hover{

    border-color: #3385ff;

    color: #3385ff;

    }

    .btn2{

    height: 34px;

    padding: 6px 12px;

    border-radius: 4px;

    font-size: 15px;

    color: #fff;

    background: #3385ff;

    border-width: 0;

    font-weight: 400;

    outline: none;

    }

    .btn2:active{

    border: 1px solid #3385ff;

    color: #3385ff;

    background: #fff;

    }

    HTML:

    按钮

    按钮

    使用非常简单,就是在类选择器后面使用一个冒号后面根据需求是鼠标放上去时触发还是按下时触发决定使用哪一个伪类。如上面第一个btn是( .btn:hover ) 第二个则是( .btn2:active )。

    2.2.first-child last-child nth-child(n/odd/even)

    这三个属于结构伪类,常用来给表格或者列表添加样式。

    假设父元素是一个div,使用样式class=‘box’;

    那么当定义.box:first-child或者.box:last-child时分别是指给div的第一个或者最后一个子元素添加样式。

    nth-child这个就比较牛掰了,参数是一个数值代表给第几个元素添加样式,如果是odd标示给元素为奇数的添加样式,even则是给是偶数的元素添加样式。

    看个例子,首行添加灰色背景,其他奇数行橙色背景的一个表格

    c7dcb3008e5c

    表格

    css(简单不):

    td,th {

    padding: 12px;

    }

    table tr:nth-child(odd){

    background: #ffab00;

    }

    table tr:first-child{

    background: #ccc;

    }

    html(也很简单都是重复的):

    标题1标题2标题3标题4
    content-1content-1content-1content-1
    content-2content-2content-2content-2
    content-3content-3content-3content-3
    content-4content-4content-4content-4
    content-5content-5content-5content-5

    3.常用伪元素

    before 和 after是经常经常重用的伪元素。我们直接看两个最简单的例子。再一句话的前面(before)和后面(after)分别添加一个圆形和一个矩形。

    c7dcb3008e5c

    简单样例

    我就是那句话!

    css:

    .eazy{

    font-size: 18px;

    }

    .eazy::before{

    content:'';

    display: inline-block;

    width: 10px;

    height:10px;

    background: #ffab00;

    border-radius:50%;

    }

    .eazy::after{

    content:'';

    display: inline-block;

    width: 10px;

    height:10px;

    background: #3385ff;

    }

    双冒号后面跟跟关键字before或者after,在后面的内容即是要给这个伪元素添加的样式。其中content属性一定要设置,可以设置为空,否则不会显示;其次,设置了依然没有显示就要设置表明这个伪元素块级元素。

    3.1 在来看两个例子,项目开发中经常要画一些气泡,比如

    c7dcb3008e5c

    气泡

    这是两种气泡,带有背景色的和带有边框的,实现上稍微有些区别,但是他们的小突起就是用伪元素画的。

    HTML:

    Hello, can I have a star?

    Hello, can I have a star?

    Hello, can I have a star?

    Hello, can I have a star?

    Hello, can I have a star?

    css有点长,但是仔细观察90%的代码都是重复的并不难。主要变动是使用定位position属性控制小突起的位置,以及border-color来控制凸起箭头的朝向。三角形的画法原理可以看这里!

    .bubble-box{

    display: flex;

    padding: 10px;

    }

    .bubble-top{

    width: 120px;

    padding: 10px;

    background: #3385ff;

    border-radius: 6px;

    position: relative;

    color:#fff;

    }

    .bubble-top::before{

    content: '';

    width: 0;

    height: 0;

    position: absolute;

    border:6px solid #3385ff;

    border-color: transparent transparent #3385ff transparent;

    left: 46%;

    top: -12px;

    }

    .bubble-left{

    width: 120px;

    padding: 10px;

    background: #3385ff;

    border-radius: 6px;

    position: relative;

    color:#fff;

    }

    .bubble-left::before{

    content: '';

    width: 0;

    height: 0;

    position: absolute;

    border:6px solid #3385ff;

    border-color: transparent #3385ff transparent transparent;

    left: -12px;

    top: 24px;

    }

    .bubble-bottom{

    width: 120px;

    padding: 10px;

    background: #3385ff;

    border-radius: 6px;

    position: relative;

    color:#fff;

    }

    .bubble-bottom::before{

    content: '';

    width: 0;

    height: 0;

    position: absolute;

    border:6px solid #3385ff;

    border-color: #3385ff transparent transparent transparent;

    left: 46%;

    bottom: -12px;

    }

    .bubble-right{

    width: 120px;

    padding: 10px;

    background: #3385ff;

    border-radius: 6px;

    position: relative;

    color:#fff;

    }

    .bubble-right::before{

    content: '';

    width: 0;

    height: 0;

    position: absolute;

    border:6px solid #3385ff;

    border-color: transparent transparent transparent #3385ff;

    right: -12px;

    top: 24px;

    }

    .bubble-noColor{

    width: 120px;

    padding: 10px;

    border:1px solid #ccc;

    border-radius: 6px;

    position: relative;

    color:#0f0f0f;

    }

    .bubble-noColor::before{

    content: '';

    width: 9px;

    height: 9px;

    border-top: 1px solid #ccc;

    border-left: 1px solid #ccc;

    background: white;

    transform: rotate(45deg);

    position: absolute;

    left: 46%;

    top: -6px;

    }

    3.2 利用伪元素画一个时间轴

    如图

    c7dcb3008e5c

    时间轴

    解析,每一行都只设置左边框,这样就这回出现一条竖线,然后每一行前面加一个圆点,就会呈现时间轴的样式,加圆点当然是用伪元素了。

    先看HTML,很简单:

    • 2018-11-15 吃了好吃的
    • 2018-11-16 不开心
    • 2018-11-18 蓝瘦香菇
    • 2018-11-23 滚蛋
    • 2018-12-10 嗯哼随心随遇把

    css 先给li标签设置左边框border-left,

    .list{

    padding: 10px;

    border: 1px solid #fff;

    }

    .list li{

    list-style: none;

    padding: 10px;

    border-left: 1px solid #ccc;

    }

    第二步,添加伪元素

    .list li::before{

    content: '';

    display: inline-block;

    width: 6px;

    position: absolute;

    height: 6px;

    left: 16px;

    margin-top: 7px;

    border: 1px solid #ffab00;

    border-radius: 50%;

    background: #3385ff;

    }

    c7dcb3008e5c

    3.3 伪元素怎么添加内容的

    伪元素虽然是不存在于DOM树种的元素,但是也是可以添加内容的,就是上面提到的content属性。content属性可以是URL、字符串甚至是图片,视频等。

    我们把第三节刚开始的那个前后圆形和矩形的content设置为'1'和'2'.就变成这样了。

    c7dcb3008e5c

    content 有值

    所以content就是这只伪元素中内容的入口,这也解释了为什么不设置这个属性就不显示的原因,哪怕设置为空,也相当于我定义了这个伪元素。

    最后再看一个例子:

    c7dcb3008e5c

    目录结构

    如果人工去标示会非常的消耗成本,实际上伪元素就可以轻松解决这个问题。content + counters实现目录结构。

    HTML:

    • 吃了好吃的
      • content
      • content
      • content
    • 不开心
    • 蓝瘦香菇
      • content
      • content
      • content
    • 滚蛋
    • 嗯哼随心随遇把

    css counter-reset定义一个计数器后面跟一个名字,这个属性在哪个元素上设置则标示遇到这个元素我就重新开始计数,如上面的HTML,我们把这个属性设置到ul上,则遇到ul就重新计数(添加一个新的计数器,原计数器不受影响)。

    .list2{

    padding: 10px;

    border: 1px solid #ccc;

    }

    .list2 li{

    list-style: none;

    }

    .list2 ul{

    counter-reset: xuhao;

    }

    .list2 li::before{

    counter-increment: xuhao;

    content: counters(xuhao, ".") " ";

    }

    在li元素的伪元素上接受这个计数值通过counters,第一参数接收计数器,第二参数指明新的计数值以什么字符链接在上一级计数值得后面

    展开全文
  • 类和伪元素的区别

    千次阅读 多人点赞 2018-12-08 19:21:29
    在CSS1CSS2中对伪类和伪元素没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解...

    前言

    在CSS1和CSS2中对伪类和伪元素没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。

    伪类

    伪类用于选择DOM树之外的信息,包含那些 匹配指定状态的元素 ,比如:visited:active;或是 不能用简单选择器进行表示的信息 ,后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child:first-of-type:target

    常用伪类有:

    SelectorMeaning
    :active选择正在被激活的元素(匹配指定状态)
    :hover选择被鼠标悬浮着的元素(匹配指定状态)
    :link选择未被访问的元素 (匹配指定状态)
    :visited选择已被访问的元素(匹配指定状态)
    :first-child选择满足是其父元素的第一个子元素的元素
    :lang(value)选择带有指定 lang 属性的元素
    :focus选择拥有键盘输入焦点的元素
    :enable选择每个已启动的元素
    :disable选择每个已禁止的元素
    :checked选择每个被选中的元素
    :target选择当前的锚点元素
    :first-of-type选择满足是其父元素的第一个某类型子元素的元素
    :last-of-type选择满足是其父元素的最后一个某类型子元素的元素
    :only-of-type选择满足是其父元素的唯一一个某类型子元素的元素
    :nth-of-type(n)选择满足是其父元素的第n个某类型子元素的元素
    :nth-last-of-type(n)选择满足是其父元素的倒数第n个某类型的元素
    :only-child选择满足是其父元素的唯一一个子元素的元素
    :last-child选择满足是其父元素的最后一个元素的元素
    :nth-child(n)选择满足是其父元素的第n个子元素的元素
    :nth-last-child(n)选择满足是其父元素的倒数第n个子元素的元素
    :empty选择满足没有子元素的元素
    :in-range选择满足值在指定范围内的元素
    :out-of-range选择值不在指定范围内的元素
    :invalid选择满足值为无效值的元素
    :valid选择满足值为有效值的元素
    :not(selector)选择不满足selector的元素
    :optional选择为可选项的表单元素,即没有“required”属性
    :read-only选择有"readonly"的表单元素
    :read-write选择没有"readonly"的表单元素
    :root选择根元素

    注意:
    p:first-child,表示选择的元素既要是p标签,又要是其父元素的第一个子元素,不要错认为是表示p元素的第一个子元素;
    同理,p:first-of-type表示选择的元素既要是p标签,又要是其父元素的第一个p标签元素。

    伪元素

    伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。

    SelectorMeaning
    ::first-letter选择指定元素的第一个单词
    ::first-line选择指定元素的第一行
    ::after在指定元素的内容前面插入内容
    ::before在指定元素的内容后面插入内容
    ::selection选择指定元素中被用户选中的内容

    区别

    在CSS3中,伪元素以::开头,但因为CSS1、CSS2的历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

    展开全文
  • 类和伪元素

    2017-06-20 11:10:02
    什么是伪什么又是伪元素选择器:一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪的效果可以通过添加一个...

    什么是伪类什么又是伪元素

    伪类选择器:和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
    伪元素选择器:伪元素的效果是需要通过添加一个实际的元素才能达到的。

      简单的来说伪类只是添加了样式,而伪元素则是添加了实际的元素

    伪类

    伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
    伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。
    任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

      我们可以用伪类实现这样的功能:
      获取不存在与DOM树中的信息。比如a标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;
      获取不能被常规CSS选择器获取的信息。比如伪类:target,它的作用是匹配文档(页面)的URI中某个标志符的目标元素,再比如:hover,可以获取到鼠标悬浮之后的样式。

    伪元素

    伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。
    伪元素的由两个冒号::开头,然后是伪元素的名称。
    使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::。

      伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。已::first-line为例,它获取了指定元素的第一行内容并且将第一行的内容加入到虚拟容器中。如果通过JavaScript来实现这个逻辑,那么要考虑的因素就太多了,比如制定元素的宽度、字体大小,甚至浮动元素的图文混排等等。一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

    ::before 和:before 有何不同

      伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
      对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

    使用伪元素来制作一个菜单按钮

    先来看一下演示效果
    效果
    上一下代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>伪元素绘制menu动画</title>
    </head>
    <style type="text/css">
        .menu{
            width: 48px;
            height: 48px;
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            background-color: #D9D7D6;
        }
        .center{
            display: inline-block;
            width: 18px;
            height: 2px;
            background-color: black;
            line-height: 4px;
            position:absolute;
            top: 50%;
            left: 50%;
            margin-top: -1px;
            margin-left: -9px;
            transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -webkit-transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -moz-transition:transform transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            border-radius: 3px;
            cursor: pointer;
        }
        .center::before{
            content:"";
            display: inline-block;
            width: 18px;
            height: 2px;
            background-color: black;
            line-height: 4px;
            position: absolute;
            left: 0;
            top: -5px;
            transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -webkit-transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -moz-transition:transform transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .center::after{
            content:"";
            display: inline-block;
            width: 18px;
            height: 2px;
            background-color: black;
            position: absolute;
            left: 0;
            bottom: -5px;
            transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -webkit-transition: transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            -moz-transition:transform transform .3s ease, left .3s ease, top .3s ease,bottom .3s ease,width .3s ease;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .back{
            transform:rotate(180deg);
        }
        .back::after{
            -webkit-transform: rotate(-45deg); 
            width: 13px;
            left: 8px;
            bottom: -4px;       
        }
        .back::before{
            -webkit-transform: rotate(45deg); 
            width: 13px;
            left: 8px;
            top: -4px;
        }
    </style>
    <body>
    <a href="javascript:void(0)"class="menu">
        <span class="center"></span>
    </a>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        'use strict'
        let menu = $(".center");
        $(".menu").on("click",(e)=>{
            if(menu.hasClass("back")){
                menu.removeClass("back");
            }else{
                menu.addClass("back");
            }
            e.stopPropagation();
            e.preventDefault();
        })
    </script>
    </body>
    </html>

      大概思路就是用一个span标签构成菜单按钮三个横杆的中间一个,然后通过伪元素来为这个span标签增加上下两个剩余的横杆,并且使用绝对定位来布局。
      至于变成箭头就是在写一个箭头样式的类通过js动态加到原来的按钮上了,箭头样式同样使用了伪元素,只是在之前的基础上改了角度和位置以及长度就好了。

    展开全文
  • 类和伪元素不是真正意义上的html存在的类和元素,他们的存在是为了方便对状态位置进行样式定义。具体他们之间有什么区别呢,这就是今天我们需要讨论的问题了
  • 类和伪元素的区别,以及伪元素的妙用 小白程序员-博客第二篇 说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止于...
  • 一、伪类和伪元素的引入 CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。 二、伪的...
  • 类和伪元素的异同 相同点: 伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。 在 CSS2 之前,伪类和伪元素的语法相同。selector.class:pseudo-...
  • 简单了解伪类和伪元素的区别

    千次阅读 2018-04-03 20:52:20
    使用伪元素的时候,总是感觉很相似,但又不能详细的说出两者的区别联系,那么两者到底有什么区别联系呢?下面我们就来聊聊两者,这个介绍的不多,主要还是聊聊伪元素的一些特点,这里不怎么写具体的实例,...
  • CSS 伪类和伪元素以及权重比较

    千次阅读 2019-03-24 15:54:26
    伪元素:注意伪元素是代表一元素 权重比较 共分为4个等级: 第一等:代表内联样式,如: style="xxx",权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表,伪类和属性选择器,...
  • 类和伪元素的区别是什么?

    千次阅读 2020-10-07 15:54:17
    伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些**文本实际不在文档树中**。 二、...
  • css 伪类和伪元素的用法区别

    千次阅读 2019-09-18 22:10:38
    以此来区分伪元素和。为了兼容老的浏览器,用单冒号表达伪元素也是能够被识别的,比如写:after :before :first-line :fist-letter 2.概念的区别 伪侧重丰富选择器的选择语法范围内元素的选择能力,伪元素...
  • 在今天制作一个页面的时候碰到一个::after::before的东西,以前只知道这是一种选择器,至于具体该怎么用忘记掉了,又通过这个找到一些伪类和伪元素的概念,看完觉得有点摸不着头脑,现在想给大家浅显的说明白什么是伪...
  • 单冒号用于伪的书写,双冒号用于伪元素的书写。...伪类和伪元素的区别:伪元素是虚拟元素,有类似dom结构这样的功能,伪是虚拟类名,有类似选择器这样的功能。 伪有:link:hover:active:visi...
  • 伪类 伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足,具体都有哪些伪类 对于大部分人来说,用到最多的就是状态结构化...
  • 区分伪类和伪元素

    2018-04-23 20:37:46
    伪类其实与普通的css相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪类。(这种文档树无法描述的状态是什么呢?当一个元素在用户的不同行为下...
  • CSS伪伪元素

    万次阅读 多人点赞 2019-03-11 16:47:00
    也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪伪元素? 伪:用于当已有元素处于的...
  • 无论是伪还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors CSS Selector Level 3,两者都已经是推荐标准。
  • 关于css中的伪类和伪元素,一看就明白
  • 伪元素和从字面理解就是假的元素和假的。 1、伪(单冒号) CSS3中的定义:伪存在的意义是为了通过选择器,格式化DOM树意外的信息以及不能被常规CSS选择器获取到的信息。 伪元素的功能: (1)格式化...
  • CSS伪类和伪元素的区别 1.简介 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。下面分别对伪...
  • 前端经常接触到的伪比如:link, :visit, :hover, :focus,经常接触到的伪元素比如:before, :after,之前对于伪类和伪元素之间的区别了解的并不多 首先来看伪 : css2 对伪的定义,伪用于向某些浏览器添加...
  • 类和伪元素都有一个共同的修饰词“伪”,“伪”是什么意思?就是假的呗。所以伪就是假的伪元素就是假的元素,这就是在字面上区分它们。那么我们再进一步更好的区分一下。 伪存在的意义是为了通过选择...
  • (:)和伪元素(::)的区别

    千次阅读 2019-04-10 17:52:07
    类和伪元素都是CSS1CSS2中的概念,CSS1CSS2中对伪伪元素的区别比较模糊,CSS3才对这两个概念做了相对较清晰的概念,下面看看css2css3中对这两个概念的定义: 伪 - pseudo classes CSS2中对伪的...
  • 浅谈CSS伪类和伪元素及CSS3新增伪

    千次阅读 2017-02-28 17:09:04
    选择属于其父元素的首个元素的每个元素。 p:last-of-type 选择属于其父元素的最后元素的每个元素。 p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素唯一的子元素的每个...
  • 伪元素和的区别总结

    万次阅读 多人点赞 2019-05-27 18:00:22
    其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 ...
  • 伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 我自己的理解: 伪,class是一个,就类似class这样,表示一些元素的状态的,但是无须标识的分类。
  • stylus使用伪类和伪元素的方法

    千次阅读 2020-04-27 10:46:38
    # 伪元素 p&::first-letter # 伪: a&:active

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,168
精华内容 81,667
关键字:

伪类和伪元素

友情链接: FractalTree.zip