phpstudy集成环境

 首页 > 什么时候需要用到伪元素？

什么时候需要用到伪元素？

感觉伪元素没什么必要

清除浮动和css图标是用的多些

有人说 css样式里通过dispaly这个属性就可以控制元素是块级元素或者行内元素、既然有div 还要h3,p这些块级元素干嘛。

我觉得采用伪元素可能有以下几天：
1.方便操作
2.语义化。

当你不考虑兼容问题，少用class的时候

伪元素允许你操作HTML中不是真实存在的元素，比如一个文本块的第一行或者第一个字母。

伪元素在CSS 2.1中就已经存在，但是CSS 3说明书表示他们应该使用双冒号“::”，以与伪类区分开来。在CSS 2.1中，他们也是使用单个冒号“:”的。浏览器会将能够接受两种格式，除非这些伪元素只存在于CSS3中。

::first-line

::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行

这对在你的文字块上添加一些微妙的排版细节相当有用，比如，将一片文章的第一行文字改成小写字母：

h1 + p::first-line {
    font-variant: small-caps;
    }

你也可以针对相关的div的第一行，而不用针对实际的段落标签(p):

div.post p::first-line { font-variant: small-caps; }

或者更进一步，定位某个特低的div的第一个段落的第一行：

div.post > p:first-child::first-line {
    font-variant: small-caps;
    }

这里，“>”符号表示你指定的是post div的直接子级元素，这样如果段落被包括在第二级div中，它就不会匹配这个选择器。

::first-letter

::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，比如图片。

和::first-line伪类一样，::first-letter通常用于给文本元素添加排版细节，比如下沉字母或首字母。

这里是如何使用::first-letter伪元素创建首字下沉的例子:

p {
    font-size: 12px;
    }


p::first-letter {
    font-size: 24px;
    float: left;
    }

注意如果你在某些元素中同时使用::first-line和::first-letter ，::first-letter 属性将覆盖从::first-line中继承下来的某些属性。

如果你不知道W3C规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！所以如果你计划使用它的话最好仔细的阅读一下 (其它选择器也一样)。

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。

这些元素将继承它们将附加的元素的大部分属性。

假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”，或者自己手动添加数字：

.post {
    counter-reset: image;
    }

p.description::before {
    content: "Figure number " counter(image) ": ";
    counter-increment: image;
    }

那么这会产生什么？

首先，我们告诉HTML来创建“image”计数器。比如我们可以添加该属性到页面的body。同样我们也可以给该计数器起任何一个名字，只要你想，只要我们常常使用同样的名字引用它：自己试试吧！

那么我们想在class为”description”的每一个段落之前添加这一块内容: “Figure number ” — 注意只有我们在引号里面写的内容才会被创建到页面中，所以我们也要添加一个空格！

然后，我们就有了counter(image):这将用到我们之前在.post选择器中定义的属性。它默认会从数字1开始。

下一个属性在那里表示计数器知道对于每一个p.description，它需要将image计数器增加1 (counter-increment: image)。

它并不像看起来的那么复杂，而且还会灰常的有用。

::before和::after伪元素常常只使用content属性，来添加一些短语或排版元素，但是这里我们展示了我们如果以一种更加强大的结合counter-reset和counter-increment属性的方式来使用它们。

有趣的是: ::first-line 和::first-letter 伪元素可以匹配使用::before伪元素生成的内容，如果存在的话。

浏览器支持

如果使用单个冒号的话(比如, :first-letter, 而不是::first-letter)，这些伪元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流浏览器都支持这些选择器。

转自 征服高级CSS选择器
 供参考

还有一个情况，在 CSS Counter Styles Level 3 成为 TR 之前，自定义复杂的 counter……当然也复杂不到哪里去，最多就是：

content "第", counter(section, cjk-ideographic) "节　";

想自定义 Counter Style 还是没可能的……草草草快点出 TR 啊！！！

你只能用 :before。

我觉得你作为一名球员，来写css就没什么必要！！！

----开个玩笑

伪类这个东西吧，使用起来可以少写很多js，比如说第一个子元素，最后一个子元素，奇数的子元素等等。。。。让你的css和html在语义化上更加的合理。

举个栗子，清除一个aa元素的浮动，以前要在这个元素后面添加一个bb元素，并且给bb元素clear:both；但是如果你使用了:after，就可以直接给aa:after添加样式进行清除浮动就行，省去了一个毫无意义的元素。

HTML 内容至上

不要让非内容信息污染了你的 HTML。现在貌似有一种倾向：通过 HTML 来解决设计问题，这是显然是不对的。HTML 就应该只关注内容。

HTML 标签的目的，就是为了不断地展示内容信息。

以下例子展示了误将 HTML 用来解决设计问题的这两种情况：

不推荐

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

推荐

<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。

不推荐

<!-- Content images should never be used for design elements!  -->
<span class="text-box">
  <img src="square.svg" alt="Square" />
  See the square next to me?
</span>

推荐

<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(square.svg) no-repeat;
  background-size: 100%;
}

全文：前端编码风格规范之 HTML 规范

【热门文章】
【热门文章】