结合div和span标记样式失败

时间:2014-08-04 14:36:25

标签: javascript jquery html css css3

我有两种类型的帮助文本容器。一个在<div>其他位于<span> 我用一种风格写了一篇CSS。它运行良好,但<div><spans>包含一个箭头样式孩子 <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;
}

{。{}}的CSS .arrow示例:

<div>

{。{}}的CSS .arrow示例:

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

我无法结合最后两个css。

2 个答案:

答案 0 :(得分: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作为选择器。

答案 1 :(得分:0)

您应该使用以下代码:

.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;
}
.helptext .arrow { 
    display: block;
    position: absolute; 
    border: 10px solid transparent;
    border-bottom-color: #3c578c; 
    top: -20px; 
    right: 10px;
}