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

Question

我有一把 fiddle here 。

@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>

---

我在类(class)前面加上了“酒店”一词(与我的元素相关)，所以我知道没有什么可以覆盖它。

Answer 1

类选择器以 开头。:

5.8.3 Class selectors

Working with HTML, authors may use the period (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning. The attribute value must immediately follow the "period" (.).

所以你的代码应该是

.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>