30

我从我问的上一个问题中得到了http://jsfiddle.net/8p2Wx/2/ ，我看到了这些行：

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

如果我拿走content:""，它会破坏效果，我不明白为什么它是必要的。

为什么需要添加空content元素:after和:before伪元素？

4

3 回答 3

29

如果不定义该内容应该是什么，您就无法为生成的内容设置样式。如果您真的不需要任何内容​​，只需要一个额外的“不可见元素”来设置样式，则可以将其设置为空字符串 ( content: '') 并对其进行样式设置。

自己很容易确认这一点：http: //jsfiddle.net/mathias/YRm5V/

顺便说一句，您发布的代码片段是 micro clearfix hack，此处解释：http: //nicolasgallagher.com/micro-clearfix-hack/

至于您的第二个问题，您需要一个 HTML5 shiv（一小段 JavaScript）才能<nav>在某些较旧的浏览器中设置样式。

于 2012-03-07T10:45:09.453 回答
4

作为 CSS 规范。状态，:after 和 :before 伪元素不会生成，如果 prop. content未设置为“正常”和“无”以外的值：http: //www.w3.org/TR/CSS2/generate.html#content

content对于 :before 和 :after 伪元素，初始值为 'normal' 和 'normal' 计算为 'none'。

于 2013-08-15T18:39:23.067 回答
0

CSS 有一个名为 content 的属性。它只能与伪元素 :after 和 :before 一起使用。它写得像一个伪选择器（带有冒号），但它被称为伪元素，因为它实际上并没有选择页面上存在的任何东西，而是向页面添加新的东西

看到这个以获得更好的解释：

  1. CSS 内容 1
  2. CSS 内容 2

导航元素是：

HTML 5 的新元素之一是允许您将链接组合在一起的元素，从而产生更多的语义标记和额外的结构，这可能有助于屏幕阅读器。在本文中，我将讨论如何以及在何处使用它，以及我对规范定义的一些保留意见。

  1. HTML5 标签
于 2012-03-07T10:51:27.653 回答