css ：覆盖现有样式后

Posted 2023-03-06

【中文标题】css ：覆盖现有样式后

【英文标题】：css :after overriding existing styles

【发布时间】：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 覆盖了第一个。

我们是否有任何选项可以将两者并排显示？

【参考方案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;

<label class="required labelHelp">text</label>

【参考方案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;