用于具有多个类的标记的多个 CSS 内容

Question

我正在尝试将具有 CSS内容值的图标添加到不同的类中。某些标记可​​能有多个类，在这种情况下，我希望在文本后面有多个图标。问题是，我不确定是否可以向同一个类添加多个内容值。

例子：

.entry-header::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/}

.status-private > .entry-header::after {
    content: " \f023"
}
.format-standard > .entry-header::after {
    content: " \f040"
}
.format-video > .entry-header::after {
    content: " \f03d"
}

在类是例如徽标的情况下.status-private，将显示徽标，但如果标记有两个类怎么办？例如.status-private .format-standard？那么我怎样才能显示两个图标呢？

如果可能的话，我会避免为这三个类的每种可能的组合制作 CSS。

我当前的标记：

<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
    <header class="entry-header">

        <div class="entry-date">
            May 20, 2016
        </div>

        <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
            Private: Private: This is a video post
        </div>

    </header><!-- .entry-header -->

    <div class="entry-content" data-did-load="true" style="display: none;">
        <p>
            The format of this post is video, but the video has not yet been added
        </p>
    </div><!-- .entry-content -->
</article>

我想在私人后显示图标：这是一个视频帖子

Answer 1

同一元素上不能有多个伪元素。即使您可以，正如原始答案中提到的那样，仅仅拥有也::after::after无法帮助您避免重复。

这就是我更喜欢实用性而不是纯粹性的地方。我只需span为每个 CSS classes 的每个状态添加一个空，并在 CSS 中将它们定位为::after等。

更新1：示例：

.entry-header > .icon::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/}

.entry-header > .icon-status-private::after {
    content: " \f023"
}

.entry-header > .icon-format-standard::after {
    content: " \f040"
}
.entry-header > .icon-format-video::after {
    content: " \f03d"
}

<!-- To show icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />


<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    Private
  </div>
</div>

<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    <span class="icon icon-format-standard"></span>
    Private Article
  </div>
</div>

<div class="status-private">
  <div class="entry-header">
    <span class="icon icon-status-private"></span>
    <span class="icon icon-format-standard"></span>
    <span class="icon icon-format-video"></span>
    Private Video Article
  </div>
</div>

.icon注意：您可以将第一行 CSS 中的更改为 ，并删除 s中[class=*'icon-']多余的类。iconspan

如果您使用某种编程语言（服务器端或 JavaScript），您可以使用一些编程检查来决定span在 HTML 中编写每个语言。

更新 2：避免 HTML 更改

如果您确实必须保持 HTML 原样。恐怕你必须复制选择器。

在你的特殊情况下，实际上还不算太糟糕。以下是更新后的问题 HTML 的完整示例：

.entry-header::after {
  font-family: FontAwesome;
  font-size: 15px; 
  float: right;
}

.format-standard > .entry-header::after {
    content: " \f040";
}
.status-private.format-standard > .entry-header::after {
    /*Had to put 2 spaces to make the icons separate */
    content: " \f023  \f040";
}

.format-video > .entry-header::after {
    content: " \f03d";
}
.status-private.format-video > .entry-header::after {
    /*Had to put 2 spaces to make the icons separate */
    content: " \f023  \f03d";
}

/* Might not be needed now */
.status-private > .entry-header::after {
    content: " \f023";
}

<!-- To show icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />


<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
    <header class="entry-header">

        <div class="entry-date">
            May 20, 2016
        </div>

        <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video">
            Private: Private: This is a video post
        </div>

    </header><!-- .entry-header -->

    <div class="entry-content" data-did-load="true" style="display: none;">
        <p>
            The format of this post is video, but the video has not yet been added
        </p>
    </div><!-- .entry-content -->
</article>