同级选择符
同级选择符的样式默认后者覆盖前者
<style>
li{height:40px;}
li{background:blue;}
li{background:red;}
</style>
<body>
<ol>
<li>
<li>列表2</li>
/ol>
类型选择符优先级
原则:假如默认的类型选择符1个为1,那么两个类型选择符加起来就是2,以此类推,即2优先于1
<style>
li{height:40px;}
ol li{background:blue;}//即1+1
li{background:red;}//即1
</style>
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
效果:
class选择符优先级
原则:1.假定class选择符默认优先级为10
2.同级样式优先级默认后者覆盖前者
3.优先级:类型(1)
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
</style>
<body>
<ol>
<li class="list">列表1</li>
<li>列表2</li>
</ol>
效果:
同级样式优先级默认后者覆盖前者
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
.list1{background:pink;}
</style>
<body>
<ol>
<li class="list list1">列表1</li>
<li class="list list1">列表2</li>
<li>列表3</li>
</ol>
效果:
类型名字的先后顺序和优先级没有什么关系,主要是style中定义的样式放置的顺序
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
.list1{background:pink;}
</style>
<body>
<ol>
<li class="list list1">列表1</li>
<li class="list1 list">列表2</li>
<li>列表3</li>
</ol>
效果:
id标识符优先级
原则:1.假定id标识符的优先级为100
2.优先级顺序:类型(1)
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
.list1{background:pink;}
#box{background:yellow;}
</style>
<body>
<ol>
<li class="list list1"id="box">列表1</li>
<li class="list1 list">列表2</li>
<li>列表3</li>
</ol>
如图:
style行间样式标识符
原则:优先级顺序:类型(1)
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
.list1{background:pink;}
#box{background:yellow;}
</style>
</head>
<body>
<ol>
<li class="list list1"id="box"style="background:purple;">列表1</li>
<li class="list1 list">列表2</li>
<li>列表3</li>
</ol>
效果:
JS样式
原则:优先级顺序:类型(1)
<style>
li{height:40px;}
ol li{background:blue;}
li{background:red;}
.list{background:green;}
.list1{background:pink;}
#box{background:yellow;}
</style>
<ol>
<li class="list list1"id="box"style="background:purple;">列表1</li>
<li class="list1 list">列表2</li>
<li>列表3</li>
</ol>
<script>
document.getElementById('box').style.background='#000';
</script>
效果:
更加详细的html选择符样式优先级详解请点击click:
click