我有两种类型的帮助文本容器。一个在<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。
答案 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;
}