html - css 库、DataTables 和 Bootstrap 中的不同样式

Question

我在设计的某些部分使用了 bootstrap 和 dataTable，问题是 dataTable 应用了 bootstrap 的某些 css 样式，这个问题不仅存在于这些库中，所以我认为存在一些我可以放置的东西我的风格或图书馆风格的优先级。有人知道我该如何应用我的 css 的优先级，或者我需要重置 css 样式。

Answer 1

简短的回答是:

使用!important

/* In a stylesheet */
p { color:red !important }

/* In a inline-style */
<p style="color:red !important;">This text will stay red</p>

在正常情况下，在页面中“稍后”应用具有更高选择器优先级的样式会覆盖先前设置的属性。

然而，对于像 twitter bootstrap 这样的 javascript 框架，css 样式可以在页面加载后直接应用于 html 元素，从而取代您可能做的任何事情。根据使用的代码，有些代码甚至可以清除之前定义的所有内联样式。为了克服这个问题，您可以将此 JQuery 代码放在您要更改的元素之前。

$('#elem').attr('style', $('#elem').attr('style') + '; ' + 'color: red !important');

现在，长答案...

使用以下 HTML

<p class="MyStyle" id="MyId">
    MyText
</p>

根据这 3 条规则按顺序应用 CSS 样式(规则 2 胜过规则 1):

<强>1。规则按照浏览器读取的顺序应用(从上到下):

<style type="text/css">
    p { color:blue; }
    p { color:red; }
</style>
/* Red wins */

内联样式是最后应用的

<p style="color:yellow">
    MyText
</p>
/* Yellow wins */

<强>2。最具体的规则选择器获胜(棘手的部分)

特异性是使用此优先级中规则的数量或选择器计算的:(#id,.class,元素)

/* One element =1 */
p { color:blue } /* (0,0,1) =1 */

/* One class =10 */
.MyStyle { color: yellow } /* (0,1,0) =10 */

/* One Id =100 */
#MyId { color: silver } /* (1,0,0) =100 */

/* 2 elements =2 */
p a { color:red } /* (0,0,2) =2 */

/* One element and one class =11 */
p.MyStyle { color: green } /* (0,1,1) =11 */

/* 2 elements and 2 classes =22 */
div.MyOtherStyle p.MyStyle { color: black } /* (0,2,2) =22 */

/* One Id, one class and one element =111 */
p#MyId.MyStyle { color:gold } /* (1,1,1) =111 */

/* 11 elements =11  See lower to know why this does not win over 1 class (10) */
ul li ul li ul li ul li  ul li ul li { color:red } /* (0,0,11)=11 */

/* Gold wins */

Id 总是胜过 class，而 class 总是胜过 element，无论它们的数量如何。下面是几个例子:

问:/ 如果我有一个 11 个元素的选择器，它是否胜过 1 个类 (=10)？

R:/ 即使 11 大于 10，优先级始终是 id,class,element。在这种情况下，您需要使用 (0,0,0) 中每个位置多一位数字来计算所有样式中的所有数字。例如:(1,1,1)=111 将变为 (100,10,1)=100101。因此，11 个元素将是 (0,0,11)=11，而 1 个类将是 (0,10,0)=100。

这等同于对 (a,b,c) 进行数学运算:(a*100, b*10, c)。如果您的选择器中的元素超过 101 个，请重新找工作或使用 (a*1000, b*100, c)。

<强>3。 !important 规则所有这些

在使用 !important 之前你应该尝试 1 和 2