Html 如何更改弹出标题的背景色？

我在弹出标题的背景色上遇到问题。我正在尝试使用下面的代码更改弹出标题的背景色，但它不起作用。弹出窗口的标题背景色不采用下面的css。请帮帮我

HTML

    <a href="#openModal">Open Modal</a>
        <div id="openModal" class="modalDialog">

                        <div class="pop-header">
                            <a href="#close" title="Close" class="close">X</a>
                        </div>
    </div>

---

将.pop标题类替换为以下内容：

.pop-header
    {
         width: 100%;
         background-color: #000!important;
         height: 50px!important;
         padding: 20px;
    }

希望这对您有所帮助。

您可以试试这个：

 .pop-header
    {
         width: 100%;
         background-color: #000!important;
         height: 50px;
         padding: 20px;

    }


    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }


    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 600px;
        position: relative;
        margin: 2% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 5px;
        background: #fff;
        height: 100%;
    }

    .close
    {
        float: right;
        color:white;
    }

或

.pop-header
    {
         width: 100%;
         background-color: #000!important;
         height: 50px;
         padding: 20px;

    }

.pop-header p
{
  color:white;
  background-color:blue;
  float:left;
  margin:0px;

  width:100%;
  top:0px;
  position:relative;
  display:inline-block;
  padding:8px;
}

    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }


    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 600px;
        position: relative;
        margin: 2% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 5px;
        background: #fff;
        height: 100%;

    }

    .close
    {
        float: right;
        color:white;
        position:absolute;
        top:13px;
         right:10px;
    }

---

在

.modalDialog>div

css中更改颜色

背景

.modalDialog > div {
        width: 600px;
        position: relative;
        margin: 2% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 5px;
        background: red; //Here
        height: 100%;
    }


编辑：

如果您只想更改标题部分的颜色，则应将一个div父项置于
。pop header

<div>
  <div class="pop-header">
  <a href="#close" title="Close" class="close">X</a>
</div>


根据您的图像进行检查

使用！重要提示：确保没有任何内容可以覆盖它，您可以将此规则放在样式表的末尾

.pop-header
    {
         width: 100%;
         background-color: #000 !important;
         height: 50px;
         padding: 20px;
    }

谢谢你的回复Sanjeev先生，我只需要标题背景颜色，它占据了我弹出的全部背景。我已经编辑了上面的类，看看这个类是否对你有帮助。我只需要标题部分。检查我的更新答案如果你只想更改标题部分，请检查上面的图片。你会明白的。@Hybreader检查我的新小提琴。@Hybreader很乐意帮助。别忘了标记为答案。当然，我需要更多帮助ketanCheck先生在没有标题背景的情况下检查此链接（这是正文部分）在标题背景的情况下检查此链接（标题部分）
.pop-header
    {
       width: 100%;
       background-color: red;
       height: 50px;
    }

.pop-header
    {
         width: 100%;
         background-color: #000 !important;
         height: 50px;
         padding: 20px;
    }