Question

我正在将bootstrap和dataTable用于我设计的某些部分，问题是某些css样式的bootstrap应用了dataTable，这个问题不仅仅出现在这些库中，所以我认为存在的东西我可以放我的风格或图书馆风格的优先级。有人知道如何应用我的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条规则（规则2赢得规则1），CSS样式按按顺序应用：

<强> 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，element）

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

我总是胜过班级，班级总是胜过元素，无论他们的数量如何。以下是一些例子：

问：/ 如果我有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

之前，你应该尝试1和2

Answer 2

是的，你应该使用css重置 - 检查normalize（http://necolas.github.io/normalize.css/）

对于优先级，样式始终覆盖以前的样式。因此，例如，如果样式表中有重复的规则，一个在（例如）第50行，另一个在第100行，后者将具有优先权。

css库，DataTables和Bootstrap中的不同样式

2 个答案:

简短的回答是：

现在，为了答案很长......