如何将元素与CSS样式表中的某些类匹配？

Question

我这里有个小提琴.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
hotel-btn-container {
  display: table;
  width: 100%;
}
hotel-btn {
  display: table-cell;
  text-align: center;
}

<div style="display: table; width: 100%;">
  <p style="display: table-cell; text-align: center;">
    <a class="btn btn-primary" href="tel:2125550101">Call Us</a>
  </p>
  <p style="display: table-cell; text-align: center;">
    <a class="btn btn-primary" href="#"  target="_blank">Website</a>
  </p>
</div>
<br><br>
<div class="hotel-btn-container">
  <p class="hotel-btn">
    <a class="btn btn-primary hotel-btn" href="#">Call Us</a>
  </p>
  <p class="hotel-btn">
    <a class="btn btn-primary hotel-btn" href="#">Website</a>
  </p>
</div>

我有两个与内联CSS并排的按钮.按钮显示正常.

<div style="display: table; width: 100%;">
    <p style="display: table-cell; text-align: center;">
        <a class="btn btn-primary" href="tel:2125550101">Call Us</a>
    </p>
    <p style="display: table-cell; text-align: center;">
        <a class="btn btn-primary" href="#"  target="_blank">Website</a>
    </p>
</div>

但是,当我在样式表中放置相同的样式时......

hotel-btn-container {
    display: table;
    width: 100%;
}
hotel-btn {
    display: table-cell;
    text-align: center;
}

并用HTML调用类,它不会显示按钮旁边的按钮.

<div class="hotel-btn-container">
    <p class="hotel-btn">
        <a class="btn btn-primary hotel-btn" href="#">Call Us</a>
    </p>
    <p class="hotel-btn">
        <a class="btn btn-primary hotel-btn" href="#">Website</a>
    </p>
</div>

---

我已经预先在课程中添加了"酒店"这个词(与我的项目相关),所以我知道没有什么可以覆盖它.

Answer 1

类选择器以.以下内容开头:

5.8.3类选择器

使用HTML时,作者可以在表示 属性时使用period(.)表示法作为表示法的替代.因此,对于HTML,并具有相同的含义.属性值必须紧跟"句点"().~=classdiv.valuediv[class~=value].

所以你的代码应该是

.hotel-btn-container {
    display: table;
    width: 100%;
}
.hotel-btn {
    display: table-cell;
    text-align: center;
}

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.hotel-btn-container {
  display: table;
  width: 100%;
}
.hotel-btn {
  display: table-cell;
  text-align: center;
}

<div class="hotel-btn-container">
  <p class="hotel-btn">
    <a class="btn btn-primary hotel-btn" href="#">Call Us</a>
  </p>
  <p class="hotel-btn">
    <a class="btn btn-primary hotel-btn" href="#">Website</a>
  </p>
</div>

Answer 2

在外部CSS中,您缺少.选择器.因此,您需要按如下方式替换外部CSS中的类

.hotel-btn-container {
    display: table;
    width: 100%;
}

.hotel-btn {
    display: table-cell;
    text-align: center;
}

在此处阅读有关选择器的更多信息