mozilla

比较版本

优先级

更改版本

修订版 525907:

由 sleepholic 在 进行的修订 525907

修订版 525953:

由 sleepholic 在 进行的修订 525953

标题:
优先级
优先级
网址缩略名:
CSS/Specificity
CSS/Specificity
内容:

修订版 525907
修订版 525953
n23      注意: 在文档树中的临近元素是不会对元素优先级计算产生影响的.n23      注意: 在文档树中的距离是不会对元素优先级计算产生影响的.(可以看文档中<strong>无视DOM树中的距离</str
 >ong>的例子)
n25    <h3 id=".E4.BC.98.E5.85.88.E7.BA.A7.E9.A1.BA.E5.BA.8F.E8.A1.An25    <h3 id=".E4.BC.98.E5.85.88.E7.BA.A7.E9.A1.BA.E5.BA.8F">
>8"> 
nn50    <div class="geckoVersionNote">
51      <pre>
52&lt;div id='test'&gt;
53    &lt;a href="#"&gt;text&lt;/a&gt;
54&lt;/div&gt;
55</pre>
56    </div>
n51      &lt;div id='test'&gt;n58      &nbsp;
52    </div>
53    <div>59    </div>
54      &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href="#"&gt;text&lt;/a&gt
>; 
55    </div>
56    <div>
57      &lt;/div&gt;
58    </div>
59    <p>
60      &nbsp;
61    </p>
n233      很简单,你只需要再加一条&nbsp;<code style="font-size: 14px;">!importantn231      很简单,你只需要再加一条&nbsp;<code style="font-size: 14px;">!important
> 的CSS规则:</code>, and either give the selector a higher specificit> 的CSS语句,将其应用到更高优先级的选择器(在原有基础上添加额外的标签、class或id选择器)上;或是保持选择器一样,但添加的
>y (adding an additional tag, id or class to the selector), or add>位置需要在原有声明的后面(优先级相同的情况下,后边定义的会覆盖前边定义的)。</code>
> a CSS rule with the same selector at a later point than the exis 
>ting one (in a tie, the last one defined wins). 
234    </p>
235    <p>232    </p>
236      Some examples with a higher specificity:233    <div class="geckoVersionNote">
234      <pre>
235<span style="line-height: 1.5;">&lt;div&gt;</span>
236<span style="line-height: 1.5;">  &lt;a href="#" id="test"&gt;tex
 >t&lt;/a&gt;</span>
237&lt;/div&gt;
238</pre>
239    </div>
240    <p>
241      <span style="line-height: 1.5;">想要把原有的绿色文本变成红色,提升优先级的方式:</s
 >pan>
n239<code class="language-html" style="font-size: 12px; font-family: n244<code class="language-html" style="font-size: 12px; font-family: 
>Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text->Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-
>shadow: none; direction: ltr; word-spacing: normal; tab-size: 4;">shadow: none; direction: ltr; word-spacing: normal; tab-size: 4;"
>>table td    {height: 50px !important;}>>#test.a{
240.myTable td {height: 50px !important;}245  color: red !important;&lt;!--尽管这条声明在前,但是仍会覆盖下边的样式--&gt;
241#myTable td {height: 50px !important;}</code>246}
247a{
248  color: green !important;
249}</code>
n253      Or add the same selector after the existing one:n261      在现有:
n256<code class="language-html" style="font-size: 12px; font-family: n264<code class="language-html" style="font-size: 12px; font-family: 
>Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text->Consolas, Monaco, 'Andale Mono', monospace; color: inherit; text-
>shadow: none; direction: ltr; word-spacing: normal; tab-size: 4;">shadow: none; direction: ltr; word-spacing: normal; tab-size: 4;"
>>td {height: 50px !important;}</code>>>a{
265  color: green !important;
266}
267a{
268  <span style="font-family: 'Courier New', 'Andale Mono', monospa
 >ce; font-weight: inherit; color: inherit; word-spacing: normal; b
 >ackground-color: rgb(246, 246, 242);">color: red !important</span
 >><span style="font-family: 'Courier New', 'Andale Mono', monospac
 >e; font-weight: inherit; color: inherit; word-spacing: normal; ba
 >ckground-color: rgb(246, 246, 242);">;</span><span style="font-fa
 >mily: 'Courier New', 'Andale Mono', monospace; font-weight: inher
 >it; color: inherit; word-spacing: normal; background-color: rgb(2
 >46, 246, 242);">&lt;!--同样的选择器,后边的声明会覆盖前边的--&gt;</span>
269}</code>
n265      <strong>For more information, visit:</strong>n278      <strong>更多关于important的帖子:</strong>
t355      Tree proximity ignorancet368      无视DOM树中的距离

返回历史