css:覆盖现有样式后

Question

我正在使用asp.net mvc应用程序来显示所需的符号*以及帮助符号？作为人物.但是？覆盖*,我终于可以看到一个？符号.我怎样才能显示这两个符号？

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

Asp.Net MVC代码显示标签

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

Css代码显示*和？标签后

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

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

Answer 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;
}

Answer 2

如果你只有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;
}