Question

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

示例：

.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只会帮助您避免重复。

这是我更喜欢实用而非纯洁的地方。我只为每个CSS span es为每个状态添加一个空的class，然后使用::after等将其定位在CSS中。

更新1：示例：

＆＃13;

.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"
}

＆＃13;

<!-- 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>

＆＃13;

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

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

更新2：避免HTML更改

如果你真的必须按原样保留HTML。你不得不复制我害怕的选择者。

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

＆＃13;

.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";
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

也可以添加这样的多个内容。

＆＃13;

div::after{
  font-family: FontAwesome;
}
.icon::after{
  content: "\f03d";
  font-size: 30px;
}
.icon.icon2::after{
  content: "\f023  \f03d  \f023";
  font-size: 30px;
}

＆＃13;

<head>
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">  
</head>

<div class="icon"></div>
<div class="icon icon2"></div>

＆＃13;

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

2 个答案: