一.css权重依次减弱
1)内联样式
<p style="color: red;">css demo</p> //在标签上加的style 优先级最高
2)id选择器
<style type="text/css">
#red{
color: red;
}
</style>
<p id="red">css demo </p>
3)属性选择器
<style type="text/css">
/* 对有id属性的div元素起作用的CSS样式 */
p[id] {
color: blue;
}
/* 对有id属性值 以demo结尾的p元素起作用的CSS样式 */
p[id$=demo] {
color: blue;
}
/* 对有id属性值包含demo的p元素起作用的CSS样式 */
p[id*=demo] {
color: blue;
}
/* 对有id属性值以demo开头的p元素起作用的CSS样式 */
p[id^=demo] {
color: blue;
}
/* 对有id属性值等于demo的p元素起作用的CSS样式 */
p[id=demo] {
color: yellow;
}
</style>
<p id="demo">css demo </p>
4)类选择器
<style type="text/css">
.demo{
color: red;
}
</style>
<p class="demo" >css demo </p>
5)元素选择器
<style type="text/css">
p{
color: red;
}
span{
color: yellow;
}
</style>
<p >css demo </p>
<span>css demo </span>
6)通用选择器
<style type="text/css">
p *{
color: red;
}
*{
color: yellow;
}
</style>
<p >
<span>css demo </span>
<p>css demo </p>
</p>
<span>css demo </span>
<div>css demo </div>