如何定位父级内的所有标签
Posted
技术标签:
【中文标题】如何定位父级内的所有标签【英文标题】:How to target all tags inside parent 【发布时间】:2020-12-02 09:28:26 【问题描述】:我正在尝试编写适用于两个单独 div 内的两个按钮的 sass,但我编写的所有样式仅适用于一个按钮,有什么方法可以针对所有按钮? 这是我的html:
<div class="main-cta-buttons">
<div class="subscribe-form">
<div>
<button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a marketer">Become a Marketer</button>
</div>
</div>
<button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a partner">Become a Partner</button>
</div>
</div>
</div>
这是我的无礼:
.main-cta-buttons
display: flex;
// align-items: center;
justify-content: space-evenly;
max-width: 70rem;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
@media(max-width: 736px)
flex-direction: column;
max-width: 100%;
.subscribe-form
> div
@media(max-width: 736px)
margin-bottom: 2.6rem;
& button
text-align: center;
justify-content: center;
display: flex;
我尝试了几乎所有我能想到的方法,但这些按钮样式只显示在第一个按钮上。 谢谢
【问题讨论】:
【参考方案1】:您可以尝试使用 * 每个孩子都会得到 css 道具
div.main-cta-buttons *
// CSS Property
【讨论】:
【参考方案2】:我将编写以下 (S)CSS(考虑到您提供的 HTML):
.subscribe-form .btn styles be here
这样您就可以在subscribe-form
容器中设置两个按钮的样式。
P.S.:关于您使用 aria-label 的说明。信息已经作为文本在按钮中,因此将相同的文本作为 aria-label 的值放在按钮上会使文本变得多余。在最坏的情况下,它会被屏幕阅读器软件或其他辅助技术读取两次。
【讨论】:
以上是关于如何定位父级内的所有标签的主要内容,如果未能解决你的问题,请参考以下文章
使用 Firebug,我可以看到父级内的 HTML<Div> 部分,当我使用 Selenium 获取基于 html 源的 <div id> 时,我看不到子级