将相同的HTML类应用于元素组
将相同的HTML类应用于元素组
提问于 2022-02-21 22:46:29
在HTML中，我有以下内容：
<a id="hdr20"></a>
<div class="hdr-bar">
<a href="#" class="hdr-btn">Top</a>
<a href="#hdr19" class="hdr-btn">ToS</a>
<a href="#hdr2" class="hdr-btn">ToC</a>
<a href="#hdr21" class="hdr-btn">Skip</a>
</div>我想使用DRY (不要重复自己)的方法，并使用这样的方法：
<a id="hdr20"></a>
<div class="hdr-bar">
<class="hdr-btn">
<a href="#">Top</a>
<a href="#hdr19">ToS</a>
<a href="#hdr2">ToC</a>
<a href="#hdr21">Skip</a>
</class>
</div>我试过<span class="hdr-btn，但那不起作用。
我尝试过将：<div class="hdr-bar"更改为：<div class="hdr-bar hdr-btn"，但这是行不通的。
现有CSS
CSS工作得很好：
.hdr-bar {
display: block;
position: relative;
width: 100%;
height: .5rem; // Allow bit extra for button box height
text-align: right; // Don't use "float: right;" that breaks rendering order
&:before {
content: "";
display: block;
}
}
.hdr-btn {
display: inline-block;
position: relative;
color: $header-bg-color; // Cayman green
padding: 5px 15px; // vertical, horizontal padding around button text
font-size:0.75em; // 75% of normal font for button text
margin-left: 10px; // Now that right aligned, switch margin side
// From: https://stackoverflow.com/questions/65297617
background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
background-color: $honeydew; // Honeydew
&:hover {
background-position:bottom;
color:#F0FFF0;
}
}也许可以使用hdr-btn将hdr-bar类分配给hdr-bar类中的所有元素？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-21 22:53:24
最接近您想要的可能是.hdr-bar > a CSS选择器，它将选择.hdr-bar下的每个<a>元素。
<a id="hdr20"></a>
<div class="hdr-bar">
<a href="#">Top</a>
<a href="#hdr19">ToS</a>
<a href="#hdr2">ToC</a>
<a href="#hdr21">Skip</a>
</div>.hdr-bar {
display: block;
position: relative;
width: 100%;
height: .5rem; // Allow bit extra for button box height
text-align: right; // Don't use "float: right;" that breaks rendering order
&:before {
content: "";
display: block;
}
}
/* here! */
.hdr-bar > a {
display: inline-block;
position: relative;
color: $header-bg-color; // Cayman green
padding: 5px 15px; // vertical, horizontal padding around button text
font-size:0.75em; // 75% of normal font for button text
margin-left: 10px; // Now that right aligned, switch margin side
// From: https://stackoverflow.com/questions/65297617
background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
background-color: $honeydew; // Honeydew
&:hover {
background-position:bottom;
color:#F0FFF0;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71213911
复制相关文章
相似问题
腾讯云开发者
