伪元素 订阅
伪对象语言创造的元素不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 展开全文
伪对象语言创造的元素不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
信息
外文名
Pseudo object language
又    称
伪元素
中文名
伪对象语言
伪对象语言伪对象语言
伪对象用于将特殊的效果添加到某些选择器。其语法为:选择器:伪元素{属性:值} [1]  CSS中的伪对象如表1:
收起全文
精华内容
下载资源
问答
  • 伪元素

    2017-07-02 11:08:16
    伪元素

    :before:

    伪元素在元素之前添加内容

    一般格式如下:

    h1:before{
        content:"hahah";
    }
    h1:before
      {
      content:url(beep.wav);
      }

    :after

    伪元素在元素之后添加新内容
    用法与before类似。

    展开全文
  • CSS 伪元素

    2020-12-14 01:16:11
    CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} :first-...
  • CSS伪元素是用来添加一些选择器的特殊效果。CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。语法伪元素的语法:selector:pseudo-element {property:...

    CSS伪元素是用来添加一些选择器的特殊效果。

    CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

    语法

    伪元素的语法:

    selector:pseudo-element {property:value;}

    CSS类也可以使用伪元素:

    selector.class:pseudo-element {property:value;}

    :first-line 伪元素

    "first-line" 伪元素用于向文本的首行设置特殊样式。

    在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:

    实例

    p:first-line

    {

    color:#ff0000;

    font-variant:small-caps;

    }

    注意:"first-line" 伪元素只能用于块级元素。

    注意: 下面的属性可应用于 "first-line" 伪元素:font properties

    color properties

    background properties

    word-spacing

    letter-spacing

    text-decoration

    vertical-align

    text-transform

    line-height

    clear

    :first-letter 伪元素

    "first-letter" 伪元素用于向文本的首字母设置特殊样式:

    实例

    p:first-letter

    {

    color:#ff0000;

    font-size:xx-large;

    }

    注意: "first-letter" 伪元素只能用于块级元素。

    注意: 下面的属性可应用于 "first-letter" 伪元素:font properties

    color properties

    background properties

    margin properties

    padding properties

    border properties

    text-decoration

    vertical-align (only if "float" is "none")

    text-transform

    line-height

    float

    clear

    提示:有关 first-letter 伪元素的相关描述,你可以参考本站的CSS :first-letter 伪元素一节。

    伪元素和CSS类

    伪元素可以结合CSS类:

    p.article:first-letter {color:#ff0000;}

    A paragraph in an article

    上面的例子会使所有 class 为 article 的段落的首字母变为红色。

    Multiple Pseudo-elements

    可以结合多个伪元素来使用。

    在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。

    段落中的其余文本将以默认字体大小和颜色来显示:

    实例

    p:first-letter

    {

    color:#ff0000;

    font-size:xx-large;

    }

    p:first-line

    {

    color:#0000ff;

    font-variant:small-caps;

    }

    CSS - :before 伪元素

    ":before" 伪元素可以在元素的内容前面插入新内容。

    下面的例子在每个

    元素前面插入一幅图片:

    实例

    h1:before

    {

    content:url(smiley.gif);

    }

    CSS - :after 伪元素

    ":after" 伪元素可以在元素的内容之后插入新内容。

    下面的例子在每个

    元素后面插入一幅图片:

    实例

    h1:after

    {

    content:url(smiley.gif);

    }

    所有CSS伪类/元素选择器示例示例说明

    :linka:link选择所有未访问链接

    :visiteda:visited选择所有访问过的链接

    :activea:active选择正在活动链接

    :hovera:hover把鼠标放在链接上的状态

    :focusinput:focus选择元素输入后具有焦点

    :first-letterp:first-letter选择每个

    元素的第一个字母

    :first-linep:first-line选择每个

    元素的第一行

    :first-childp:first-child选择器匹配属于任意元素的第一个子元素的 元素

    :beforep:before在每个

    元素之前插入内容

    :afterp:after在每个

    元素之后插入内容

    :lang(language)p:lang(it)为

    元素的lang属性选择一个开始值

    展开全文
  • CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解,毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象,稍微有一...

    CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解,毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象,稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。

    先介绍一下伪类和伪元素有什么区别?其实这是个纯概念上的问题,就算不理解也不影响实际的使用。但作为一个CSSer,概念这种东西有时候就像地基,地基越牢固,将来大厦也越坚挺。

    伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。不明白?举个例子就明白了。

    用伪类:first-child将第一个p设成红色:

    p:first-child {color: red}

    第一个段落

    //我将变成红色

    第二个段落

    等价于手动给DOM元素添加类:

    .first-child {color: red}

    第一个段落

    第二个段落

    那伪元素呢?用伪元素::first-letter给第一个字设成红色:

    p::first-letter {color: red}

    第一个段落

    第二个段落

    如果不用伪元素,你需要多加一个元素(如span)这样来实现:

    .first-letter {color: red}

    一个段落

    第二个段落

    再回过头感受一下:伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。现在我们来看看具体有哪些伪类和伪元素。

    伪类:

    可细分6类:动态,UI元素状态,目标,语言,结构,否定

    动态伪类选择器::link,:visited,:hover,:active,:focus。非常常用,从名字就能开出用途(事实上所有伪类选择器从名字上都能看出用途),具体就不赘述了。太基础的东西还是自行参考W3C吧

    UI元素状态伪类选择器::checked,:enabled,:disabled。常用且简单,不赘述。

    目标伪类选择器::target用来获取锚点#部分。页面实现跳转定位很多都是使用a标签的锚点来来定位。其实背后的原理是a标签的href属性能改变浏览器的location.hash,让页面在有滚动条的前提下实现页面内跳转。:target的作用就是获取跳转的目标元素,如下可以获取到id为logo的div:

    jump to logo

    语言伪类选择器::lang根据lang属性匹配元素,如

    //可在html标签上设,也可以

    标签里设

    :lang(en) { …… } //根据页面的不同的语言(如英语和法语)对不同DOM元素进行处理

    :lang(fr) { …… }

    结构伪类选择器::first-child,:last-child,:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n),:first-of-type,:last-of-type,:only-child,:only-of-type,:root,:empty。

    :first-child看名字就知道了,第一个孩子。等同于:nth-child(1)。

    :last-child看名字就知道了,最后一个孩子。等同于:nth-last-child(1)。

    :nth-child(n)该标签是某类型,并且是父标签里第n个孩子。反之:nth-last-child(n)就是倒数第n个孩子。

    :nth-of-type(n)父标签里第n个某类型的孩子。反之:nth-last-of-type(n)父标签里倒数第n个某类型的孩子。

    :nth-child(n)和:nth-of-type(n)这两个伪类的参数n从0开始,你可以写出任意喜欢(奇葩)的公式,如n+4,-n+6,3n-2等,当结果值等于或小于0时直接被无视掉。当然最常用的还是奇数2n+1和偶数2n,因此有两个关键词odd和even。那它俩的差异在哪里呢?

    例如div下有两个p,我们想将第二个p变成红色,用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意义是不同的,前者表示该标签是p且是父标签里第二个孩子。后者表示父标签里第二个p。

    现在把DOM结构变一下:div下依次有一个a,两个p。我们想将第二个p成红色,用p:nth-child(2) { color: red; }就不对了,会将第一个p(因为该标签是p且是父元素的第二个孩子)设成红色。用p:nth-of-type(2) { color: red; }才能将第二个p设成红色。

    :first-of-type,:last-of-type同理可知就是父标签里第一个/最后一个某类型的孩子。等同于:nth-of-type(1),:nth-last-of-type(1)。

    :only-child父标签里仅有一个孩子。

    :only-of-type父标签里唯一一个该类型的孩子。有什么用呢?例如当div里只有一张img时不浮动。当div里有多张img时,让它们从左至右依次浮动显示。你可以用div > img:only-of-type {…}来控制当div里只有一张图片和不止一张图片时采用不同的布局

    :root匹配根元素,HTML中根元素始终是html,等同于基本选择器html

    :empty表示当元素里面什么都没有的时候(包括空格、标签内换行)应用相关样式,常用于高亮提示用户搜索的结果为空。例如.xx:empty { background-color: red; },div里无内容时背景色成红色。div里有内容时无背景色。但要注意伪元素不算内容,如.xx::after { content: 'hello'; },此时div里显示字但背景色仍旧是红色。想想也知道::before,::after是伪元素,不是真实元素,因此不会影响:empty判断。而且因为伪元素不在DOM树内,你无法取得::before, ::after伪元素生成的content。

    否定伪类选择器::not,例如不hover时显示某效果li:not(:hover)。

    伪类结合起来用能发挥更强大的作用。例如常见的渐进式需求,当列表项少于5项时用显示预览行文字,当列表项多于5项时用不显示预览行文字。这样条目少时,增加预览行文字便于用户预览,且让页面不显得非常空。条目多时,不显示预览行,让用户更多地关注条目名,便于用户选取。你如何处理呢?

    先无脑对li应用上显示预览行的式样。然后用li:nth-child(5),可惜它只能选中第5项,而我们想要的是当数量>=5时,所有li都应用隐藏预览行文字的式样。就算改成li:nth-child(5) ~ li也不对,它将第5个及之后的li应用上了新式样,前4个仍旧是旧的式样,等同于li:nth-child(n+5)。由于没有“回头看”的方式,你可能放弃CSS而用JS来处理。

    其实CSS是有技巧能实现“回头看”的。当列表项数量为5时是临界点。因此当数量正好为5时,取第1项,再选中第1项之后的所有项即可:

    li:first-child:nth-last-child(5),

    li:first-child:nth-last-child(5) ~ li {

    ...

    }

    如果没明白,再解释一下上面的代码。第一行表示第一个元素是从后往前数的第5个元素。第二行是当数量逐渐增加到5时,选中从第一个元素之后的所有元素。

    伪元素

    用于定位文档中包含的文本,但无法在DOM树中定位。有::first-line,::first-letter,::before,::after,::selection(CSS3之前是一个冒号,CSS3后变成两个冒号,用于和伪类区分开)

    ::first-line,::first-letter分别是首行和首字母

    ::before,::after相当于在元素内部插入两个额外的标签,最适合也是最推荐的应用就是图形生成

    ::selection用于匹配选中的文本(注意Firefox下是::-moz-selection)。该伪元素只接受两个属性background和color

    更多资源上:去转盘;或者加入我的QQ群一起讨论学习js,css等技术(QQ群:512245829)

    展开全文
  • 一、CSS 伪元素用于向某些选择器设置特殊效果。 1、:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 p:first-line { color:#ff0000; font-variant:small-caps; } 注释...

    一、CSS 伪元素用于向某些选择器设置特殊效果。

    1、:first-line 伪元素

    "first-line" 伪元素用于向文本的首行设置特殊样式。

    p:first-line
      {
      color:#ff0000;
      font-variant:small-caps;
      }

    注释:"first-line" 伪元素只能用于块级元素。

    注释:下面的属性可应用于 "first-line" 伪元素:

     

    • font (设置字体属性)
    • color  (设置文本颜色)
    • background
    • word-spacing ( 用于汉字,规定段落中的字间距是 25 像素:p{word-spacing:25px;} )
    • letter-spacing   (用于字母,增加或减少字符间的空白,即字符间距)
    • text-decoration (修饰文本)
    描述
    none 默认。定义标准的文本。
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    blink 定义闪烁的文本。
    inherit 规定应该从父元素继承 text-decoration 属性的值。

     

     

    • vertical-align (属性设置元素的垂直对齐方式)
    • text-transform (属性控制文本的大小写)
    • line-height
    • clear

    2、:first-letter 伪元素

    "first-letter" 伪元素用于向文本的首字母设置特殊样式

     

    注释:"first-letter" 伪元素只能用于块级元素。

    注释:下面的属性可应用于 "first-letter" 伪元素:

     

    • font
    • color
    • background
    • margin
    • padding
    • border
    • text-decoration
    • vertical-align (仅当 float 为 none 时)
    • text-transform
    • line-height
    • float
    • clear

    3、CSS2 - :before 伪元素

    ":before" 伪元素可以在元素的内容前面插入新内容。

    下面的例子在每个 <h1> 元素前面插入一幅图片:

    h1:before
      {
      content:url(logo.gif);
      }

    4、CSS2 - :after 伪元素

    ":after" 伪元素可以在元素的内容之后插入新内容。

    下面的例子在每个 <h1> 元素后面插入一幅图片:

    h1:after
      {
      content:url(logo.gif);
      }

    二、伪元素消除浮动 

    有这样一种情形:在一个容器(container)中,有两个浮动的子元素。
    <div>
            <div style="float:left;width:45%;"></div>
            <div style="float:right;width:45%;"></div>
    </div> 

     CSS语句中有一个:after伪选择符,就可以在父容器的尾部自动创建一个子元素。

    .clearfix:after {
         content: "\0020";
         display: block;   (确保是独立区块)
         height: 0;
         clear: both;
    }
    .clearfix {
         zoom: 1;     (:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"激活父元素的"hasLayout"属性,让父元素拥                              有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。)
    }

     三、伪类

    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */

     

     

     

    展开全文
  • 本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文。本文讲解的伪元素有:before,after.什么是伪元素(Pseudo element)?伪元素不是真正的元素,不存在与文档之中,所以js无法操作他。那为什么叫他“元素”?...
  • 伪元素与元素定位

    2020-10-22 20:30:58
    伪元素与元素定位 伪元素 before after selection placeholder 1. before 语法: 元素::before 作用: 1.创建一个伪元素,放到匹配的标签元素前面 2.通过 content 样式属性,来为伪元素添加修饰性的内容 特点: ...
  • 1. 伪元素:可以当做html标签用css样式来...(3)通过css选择器选中伪元素,对伪元素进行修改,而不是通过css创造了伪元素。 (4)content设置伪元素的文字内容,即使没有文字,也必须存在。 (5)伪元素的默认di...
  • 本篇文章给大家带来的内容是关于什么是伪类和伪元素?伪类和伪元素的区别的区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、伪类种类 2、伪元素种类 (1)伪类作用对象是...
  • :after伪元素和:before伪元素分别用于在元素之后和之前添加内容,实际网页开发过程中:after伪元素比较常用,借助:after伪元素一般用于清除浮动,如下代码: &lt;!DOCTYPE html&gt; &lt;html&gt; ...
  • 本篇教程介绍了jQuery教程 改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。<首先我们看一下css伪元素是什么:CSS伪元素用于向某些选择器设置特殊效果。伪元素有哪些...
  • before伪元素和after伪元素的具体使用

    千次阅读 2017-07-29 18:56:24
    before伪元素和after伪元素的具体使用
  • 伪类和伪元素的区别,以及伪元素的妙用 小白程序员-博客第二篇 说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止于...
  • 伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的。 伪类一般反应无法在CSS中轻松或者...
  • CSS伪元素

    2020-11-30 14:32:30
    CSS伪元素 CSS伪元素用于向某些选择器设置特殊效果 语法: 伪元素的语法:selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用:selector.class:pseudo-element {property:value;} :first-line...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,154
精华内容 6,061
关键字:

伪元素