0

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

4

2 回答 2

2

简短的回答是：

使用!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>

CSS 样式根据以下 3 条规则按顺序应用（规则 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,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 */

Id 总是战胜阶级，阶级总是战胜元素，不管他们的数量如何。这里有一些例子：

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

于 2013-06-26T18:58:14.623 回答
0

是的，您应该使用 css 重置 - 查看 normalize ( http://necolas.github.io/normalize.css/ )

为了优先考虑，样式总是会覆盖以前的样式。因此，例如，如果您的样式表中有重复的规则，一个在（比如说）第 50 行，另一个在第 100 行，则后者将具有优先权。

于 2013-06-26T16:27:54.567 回答