Question

我有一个小提琴 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>

<小时/> 我已经在课程中预先设置了“酒店”这个词（与我的项目相关），所以我知道没有什么可以覆盖它。

Answer 1

班级选择器以.开头：

5.8.3 Class selectors

使用HTML，作者可以使用句点（.）表示法作为   代表~=时替代class符号   属性。因此，对于HTML，div.value和div[class~=value]都有   同样的意思。属性值必须紧跟在   ＆＃34;周期＆＃34; （.）。

所以你的代码应该是

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在外部CSS中，您缺少.选择器。因此，您需要替换外部CSS中的类，如下所示

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

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

详细了解选择器here

Answer 3

<强>多德..

class="dude"

表示使用.

进行通话

.dude { }

和

id="dude1"

表示使用#

进行通话

#dude1 { }

您可以忽略的唯一一次是调用全局HTML标记，

即：

<div>


div { }

虽然做法不好，但维护和规模能力都很差。

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

3 个答案: