css伪元素

YPHP 发布于2019-08-30 15:53 / 2081人阅读

摘要：中的伪元素什么是伪元素可以先看一下几个小例子文字的伪元素现在添加一个块级标签和一个行内标签，并设置它的伪类字体间距效果如下文字的伪元素现在添加一个块级标签和一个行内标签，并设置它的伪类我想人类可能会一直耐心维持这个稍微和平的

css中的伪元素

什么是伪元素？
可以先看一下几个小例子：

:first-line 文字的伪元素

现在添加一个块级标签和一个行内标签，并设置它的伪类：
 css:
  p:first-line{
      font-size: 20px;
      color:aquamarine;
      word-spacing: 20px;  /*字体间距*/
  }
  span::first-line{
      font-size: 200px;
      color:red;
      word-spacing: 20px;
  }
     

效果如下:

:first-letter 文字的伪元素

现在添加一个块级标签和一个行内标签，并设置它的伪类：

  html:
   我想人类可能会一直耐心维持这个稍微和平的局面，
        但是呢？？？我们现在知道世界上不是只有“中国人”，有无数个国家，种族。
    如何证明呢？做点儿家务活？不行，5岁小孩也能做。
    妈妈的单位在颐和园附近，我家住在公主坟，这段路程约莫有20里，是够远的！
  css:
  p:first-letter{
      font-size: 35px;
      color:aquamarine;
  }
  span::first-letter{
      font-size: 50px;
      color:red;
  }

效果如下:

小结

看完了这两例子，你们可以发现第一个例子第一行的字体颜色，大小发生了改变，可是在设置中没有对p标签直接设样式，而是在p后面了一个：first-line,其实这就是伪类，html中并没有这个元素，但可以用它设置第一行文字的特殊样式，并且对行内标签不起作用
first:letter 也是伪类，也对行内标签不起作用，但是它设置的内容与第一个有不同，它是设置第一个字的特殊样式。

：before

举一个例子：





   我是一个小太阳

效果图：

：after

        margin: 0;
       padding: 0;
    }
  .main{
     width: 300px;
     height:60px;
     margin: 20px auto ;
     position: relative;
  }
  span:after{
     content: url("./img/1.gif");
  }


   快给我颁奖吧

效果图：

小结

看完了前两个，再看第三个和第四个你会发现，前两个是对文字的伪类，而第三个和第四个是它那一块伪类，它对行级标签也起作用
在上面的两个例子中可以看到
：before 在元素之前添加内容

：after 在元素之后添加内容
：before 和：after 不仅可以在前面或后面添加内容，还可以画一些小图标

以下是我用：before 画的一个简易的放大镜

效果图

GPU云服务器云服务器伪元素获取伪元素 css元素伪参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116633.html

我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
CSS3伪类和伪元素

作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号: 也叫做伪对象，具体可看看http://www.mb5u.com/tool/cs...

mozillazg 2019-04-23 13:35 评论0 收藏0
伪元素 ::after 和 ::before 应该这么用（一）

摘要：伪元素被当做的样式来进行展现，用法和普通的元素用法是一样的。中的伪元素使用个冒号，在中，为了区分伪类和伪元素，规定伪元素使用个冒号。伪元素的特点优点不占用节点，减少节点数。不仅块级元素可以设置伪元素，大部分行级元素也可以。 1 什么是伪元素？ CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS ...

BlackMass 2019-08-30 15:54 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0