css ：覆盖现有样式后答案

【问题标题】：css :after overriding existing stylescss ：覆盖现有样式后
【发布时间】：2015-02-02 20:59:24
【问题描述】：

我正在使用 asp.net mvc 应用程序来显示所需的符号 * 和帮助符号？作为字符。但是 ?是覆盖*，我终于只能看到一个？象征。如何同时显示两个符号？

PS：在这种情况下，我尝试使用 2 个图标而不是文本。我正在检查我们是否可以选择容纳图标而不是文本。

Asp.Net MVC 代码显示标签

@Html.LabelFor(model => model.myDetails, new { @class = "required labelHelp" })

显示 * 和 ?标签后

.required:after
{
    content: "*";
    padding-left: 3px;
    color: #f00;
}

.labelHelp:after
{
    content: "?";
    padding-left: 30px;
    color: #f00;
}

【问题讨论】：

正常。因为第二个:after 覆盖了第一个。
我们是否有任何选项可以将两者并排显示？

标签： css asp.net asp.net-mvc stylesheet

【解决方案1】：

你可以有一个 CSS 选择器来检查一个元素是否有两个类都适用 content: "* ?"

.required:after
{
    content: "*";
    padding-left: 3px;
    color: #f00;
}

.labelHelp:after
{
    content: "?";
    padding-left: 30px;
    color: #f00;
}

.required.labelHelp:after
{
    content: "* ?";
    padding-left: 30px;
    color: #f00;
}

如果你想显示一个图标：

.required:after
{
    content: "";
    background-image: url(/images/required.png);
    width: 16px;
    height: 16px;
    padding-left: 3px;
    color: #f00;
}

.labelHelp:after
{
    content: "";
    background-image: url(/images/labelHelp.png);
    width: 16px;
    height: 16px;
    padding-left: 3px;
    color: #f00;
}

.required.labelHelp:after
{
    content: "";
    background-image: url(/images/required_labelHelp.png);
    /* required_labelHelp.png should be an image that contains both required and labelHelp png*/
    width: 32px;
    height: 16px;
    padding-left: 3px;
    color: #f00;
}

【讨论】：

如果我必须使用图标怎么办？像 .required.labelHelp:after { content: url('../Content/Images/icoHelp.png');左边距：30px；颜色：#f00； }
@Chandana 我改了答案，希望对你有帮助。

【解决方案2】：

战略性地覆盖:after 怎么样？你可以通过添加这个 CSS 来做到这一点。

.required.labelHelp:after
{
    content: "* ?";
    padding-left: 3px;
    color: #f00;
}

DEMO

【讨论】：

【解决方案3】：

基于 Mohamad 的回答，一种无需创建合成图像即可包含图标的方法

.required.labelHelp:after {
  content: "";
  background-image:
    url(http://placekitten.com/g/64/64),
    url(http://placekitten.com/g/64/60);
  background-position:
    left top,
    right top;
  background-size:
    60px
    60px;
  background-repeat: no-repeat;
  width: 120px;
  height: 60px;
  position: absolute;
}

&lt;label class="required labelHelp"&gt;text&lt;/label&gt;

【讨论】：

【解决方案4】：

如果您只有 2 个可能的图标，我的建议是同时使用 :before 和 :after。由于这些伪元素每个元素只能使用一次（不会相互覆盖），因此您可以灵活地同时应用 2 个伪元素，其中每个伪元素都可以有自己独立的样式。您可能需要添加一些额外的 CSS 来正确定位图标，但这应该很简单。请注意，如果您需要应用 3 个以上的图标，这将不起作用，因为只有 2 个伪元素 :before 和 :after。

.required:after
{
    content: "*";
    background-image: url(/images/required.png);
    padding-left: 3px;
    color: #f00;
}

.labelHelp:before
{
    content: "?";
    background-image: url(/images/labelHelp.png);
    padding-left: 30px;
    color: #f00;
}

【讨论】：