7

我像许多其他人一样使用过 CSS 伪元素选择器，主要是说我已经使用过它们。

但我正在绞尽脑汁，努力想出一个将它们与标记放在一起的理由。

举个例子：

    <p>Hello</p>

    p:after {
       content: "*";
    }

现在，使用它比使用<span>标签有什么优势？

我错过了:beforeand的重点:after吗？在预先存在的语义标记上使用它们是否有一些坚如磐石的理由？

4

5 回答 5

9

CSS2.1 规范对生成的内容这么说：

在某些情况下，作者可能希望用户代理呈现并非来自文档树的内容。一个熟悉的例子是编号列表。作者不想明确列出数字，他或她希望用户代理自动生成它们。类似地，作者可能希望用户代理在图的标题之前插入单词“Figure”，或者在第七章标题之前插入“Chapter 7”。特别是对于音频或盲文，用户代理应该能够插入这些字符串。

基本上，目的是尽量减少“内容”对内容结构的污染，否则更适合作为表示元素，或者更好地自动化。

于 2011-07-18T22:17:28.220 回答
2

我认为:before并且:after在 CSS2 中，但除了迂腐之外，这些特殊的伪元素旨在添加实际上只是一种视觉辅助的“内容”。

最好的例子是在元素周围添加引号<q>，Firefox 在其默认样式表中使用这些选择器。有些人还用它们来清除花车。

尽管有 CSS 属性的名称，但您不应该将它们用于实际内容，content因为非可视用户代理（即屏幕阅读器）应该忽略它们。

我从来没有为它们想出太多用处，尽管我曾经使用它们将小 unicode 图标添加到个人网站上的悬停链接 - 就像你一样，几乎只是说我使用过它们。

于 2011-07-18T22:16:33.133 回答
2

如果您正在谈论:beforeand :after：它们被用作表示元素，用于在实际文档中添加更多元素会混合结构和外观的情况。我见过的几个案例：

  • 项目符号列表中的项目符号
  • q元素周围的引号
  • 时尚的阴影
  • 装饰和文本的开头或结尾
于 2011-07-18T22:21:38.010 回答
1

CSS3 伪选择器还包括基本的选择器，如 :link、:hover、:active、:focus、:first-child、:nth-child。没有这些，就不可能建立一个有用的网站。

至于不太常用的伪选择器，例如 :after 和 :before，它们在某些情况下很有用，其中内容是动态生成的，并且您想在特定元素或标签之前插入一些东西。

于 2011-07-18T22:16:46.970 回答
1

老实说，唯一有价值的用法是强制元素在 dom 中具有正确的大小。例如使用此代码：

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

通常，您必须为 .container div 指定精确或最小高度。如果你用一些非常简单的 css 应用 ":after"，你应用到 .container 的任何背景实际上都会正确显示（几乎在每个浏览器中），几乎没有填充。

.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}

现在尝试该示例，应用背景颜色或图像，您将看到 .container div 始终具有适当的高度（这将是内部内容的总组合高度），即使所有内部 html 都是浮动的（如大多数 ul/li css 按钮都是这种情况）。

我还在每个 div 上使用 after，我将所有内容包装在每个 html 页面中。这是因为给定页面上的所有内容都可能是浮动的，我想确保我的内容 div 始终具有正确的大小/填充和适当的背景。

于 2012-01-07T08:55:43.147 回答