javascript - 组合 div 和 span 标签样式失败

Question

我有两种类型的帮助文本容器。一个在 <div>其他在<span>我用一种风格写了一个CSS。它运行良好，但那些 <div>和 <spans>包括样式为 child 的箭头 <div>和 <span> .我试图结合 .arrow风格，但在实践中失败了。有没有办法结合这些相同的样式？

<div> 的 HTML 示例:

<div class="helptext" id="{{ id_for_label }}">
    <div class="arrow"></div> Helptext is in here
</div>

<span> 的 HTML 示例:

<span class="helptext" id="{{ id_for_label }}">
    <span class="arrow"></span> Helptext is in here
</span>

两者的 CSS:

div[class="helptext"],span[class="helptext"] {
    position: absolute;
    display: none;
    right: 15px;
    margin-top: 3px;
    padding: 10px;
    border: 1px solid #3c578c;
    background-color: #FCFCF0;
    opacity: 0.9;
    color: red;
    border-radius: 5px;
    box-shadow: 5px 5px 15px 1px dimgray;
    text-align: justify;
    font-size: 12px;
    z-index:100000;
}

<div> 的 CSS .arrow 示例:

div[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
                                  border-bottom-color: #3c578c; top: -20px; right: 10px;}

<span> 的 CSS .arrow 示例:

span[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
                                   border-bottom-color: #3c578c; top: -20px; right: 10px;}

我无法合并最后两个 css。

Answer 1

您的 css 的两个选择器中都缺少 .arrow

使用这个

div[class="helptext"] .arrow,span[class="helptext"] .arrow{
    position: absolute;
    display: none;
    right: 15px;
    margin-top: 3px;
    padding: 10px;
    border: 1px solid #3c578c;
    background-color: #FCFCF0;
    opacity: 0.9;
    color: red;
    border-radius: 5px;
    box-shadow: 5px 5px 15px 1px dimgray;
    text-align: justify;
    font-size: 12px;
    z-index:100000;
}

我想你可以 .helptext .arrow 作为选择器，如果你没有另一个类名 helptext 的元素。