您的位置：首页 > Web前端 > HTML

HTML菜鸟入门4

2017-08-20 16:27 323 查看

同级选择符

同级选择符的样式默认后者覆盖前者

<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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航