0

在我的 CSS 中，我使用了 2 个类选择器（带有 30 列的 Twitter 引导程序）： 

.row-fluid .span9 {
width: 29.5597485%;
*width: 29.50766516666667%;
}

如何确保应用此规则？我尝试的两种 HTML 设置似乎都不起作用。是这些正确的语法之一，还是有另一种方法来确保将上面的 CSS 规则应用于 HTML？

HTML 理念 1：

<div class="row-fluid span9">

HTML 理念 2：

<div class="row-fluid">
    <div class="span9">
4

3 回答 3

1

您提到的规则仅适用于想法#2（想法#1 需要.row-fluid.span9——类之间没有空格）。

关于调试：这是一个屏幕截图，显示了准确查看每个元素应用了哪些 CSS 规则（以及应用了哪些规则但被其他规则覆盖）是多么容易。最右侧的侧边栏不仅显示此信息，还允许您禁用/启用单个规则。CSS 文件/行号也是可点击的。

我有没有提到，在开发方面，Chrome 会把其他所有东西都从水中吹走？:)

Chrome 开发者工具示例

链接到全尺寸图像。

于 2012-06-29T19:17:34.197 回答
1

您的第一个标记将不会基于您的 CSS 应用。

.row-fluid .span9表示一个元素的类.span9作为其后代，.row-fluid因此它不会匹配 HTML 1。它将匹配 HTML 2。

  • 第一个 HTML 示例由.row-fluid.span9.
  • 第二个 HTML 示例是 match by .row-fluid .span9，或者'.row-fluid > .span9如果您想确保只有.row-fluid.

您也可能正确匹配 CSS 选择器，但是您的样式被引导程序默认样式的更高特异性所推翻。!important在这种情况下，在你的样式末尾抛出一个来测试。它将推翻。

我建议使用 FireBug 或其他 HTML 检查器，它可以帮助您以比反复试验更快的方式调试 CSS 问题。

于 2012-06-29T19:18:24.273 回答
0

如果您的规则在加载 bootstrap.css之前<style>出现在文档中的 CSS 文件或标签中，那么您的规则将被 bootstrap 覆盖。

您可以做两件事来使您的规则优先。您可以通过扩展规则本身来赋予它更高的“价值”：

div.row-fluid div.span9 {
  width: 29.5597485%;
  *width: 29.50766516666667%;
}

或者，您可以使用!important修饰符：

.row-fluid .span9 {
  width: 29.5597485% !important;
  *width: 29.50766516666667% !important;
}

最后，这些规则将仅适用于您的第二个 HTML 片段。要将规则应用于具有两个类的单个元素，您需要执行以下操作：

.row-fluid.span9 {  // notice the lack of spaces
  ....
}

虽然，不确定为什么要覆盖引导程序的宽度设置。

于 2012-06-29T19:20:41.047 回答