2014-12-04 191 views
9

我正在使用asp.net mvc应用程序来显示所需的符号*和帮助符号?作为字符。但是?重写*,我终于可以看到只有一个?符号。我怎样才能显示synmbols?css:覆盖现有样式

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; 
} 
+3

它是正常的。因为第二个':之后'覆盖第一个。 – 2014-12-04 20:18:42

+0

我们有任何选项可以显示两个旁边的选项吗? – Kurkula 2014-12-04 20:19:18

回答

14

后,您可以有一个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; 
} 
+0

如果我必须使用图标来做什么?像 .required.label帮助:在 { 内容:url('../ Content/Images/icoHelp.png'); padding-left:30px; color:#f00; } – Kurkula 2014-12-04 20:25:11

+0

@Chandana我改变了答案,我希望这可以帮助你。 – 2014-12-04 20:33:08

7

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

基于穆罕默德的答案,办法包括图标,而不需要创建合成图像

.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; 
 
}
<label class="required labelHelp">text</label>

+0

喜欢和upvoted。 – Kurkula 2014-12-19 08:12:18

1

关于战略性重写:after什么?你可以通过添加这个CSS来做到这一点。

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

DEMO