CSS样式覆盖规则

时间：2021-06-03 16:22:04

有一下问题， 想让下面的border生效 ，#比. 优先级高，

    #navigator {

        height: 100%;

        width: 200;

        position: absolute;

        left: 0;

        border: solid 2 #EEE;

    }  

    .current_block {

        border: solid 2 #AE0;

    }

有2种方法

1.

#navigator {

    height: 100%;

    width: 200;

    position: absolute;

    left: 0;

}  

.block {

    border: solid 2 #EEE;

}  

.current_block {

    border: solid 2 #AE0;

}

2.

    #navigator {

        height: 100%;

        width: 200;

        position: absolute;

        left: 0;

        border: solid 2 #EEE;

    }  

    .current_block {

        border: solid 2 #AE0 !important;

    }

规则一：由于继承而发生样式冲突时，最近祖先获胜。

显示蓝色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

body

 {color:black;}

p

 {color:blue;}

</style>

 </head>

 <body>

  <p>welcome

 to <strong>gaodayue的网络日志</strong></p>

 </body>

</html>

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。

显示红色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

body

 {color:black;}

p

 {color:blue;}

strong

 {color:red;}

</style>

 </head>

 <body>

  <p>welcome to
　　 <strong>gaodayue的网络日志</strong>
  </p>

 </body>

</html>

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

CSS选择器 权值
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四：样式权值相同时，后者获胜。显示蓝色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

    <style>

.byline

 a {color:red;}

p

 .email {color:blue;}

</style>

 </head>

 <body>

<p class="byline">Written by

	<a  class="email"  href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a>

</p>

 </body>

</html>

规则五：!important的样式属性不被覆盖。

显示红色

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

.byline

 a {color:red !important;}

p

 .email {color:blue;}

</style>

 </head>

 <body>

<p class="byline">Written by

	<a class="email" href="mailto:jean@cosmofarmer.com">

		Jean Graine de Pomme

	</a>

</p>

 </body>

</html>

相关文章