如何在不使用跨度的情况下将样式应用于内联元素

时间:2019-08-31 03:51:58

标签: html css

我真正需要知道的真正原因是由于我的模态工作

在我的模式的JavaScript代码中,其定义为仅在类为“模式按钮”时才触发打开的模式窗口

let open_modals = [];

  $(function() {

    // Get the button that opens the modal
    // read all the control of any type which has class as modal-button
    var btn = document.querySelectorAll(".modal-button");

下面是与此完美配合的html代码

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">Click Me</a>

尽管我希望文本“ Click Me”不继承“ modal-button”类的属性,但仍具有该类,所以不会破坏模式打开功能。因此我尝试了这样的事情...

<!-- Trigger/Open The Modal -->
<div class="modal-button">
<a href="#myModal1"><span class="text">Click Me</span></a>
</div

但是它破坏了模式打开功能,可能是因为文本“ Click Me”由于跨度标记未在类“ modal-button”中插入

因此,我认为我必须找到一种span标签来替代内联元素的样式

希望有人可以给我更好的方法 预先感谢

1 个答案:

答案 0 :(得分:2)

没有什么可以阻止您在同一个元素上拥有两个类,就像这样:

<a href="#myModal1" class="modal-button text">Click Me</a>

列出的第二个类的样式将优先于第一个类,但是任何查找第一类的CSS查询仍会找到该元素。