HTML菜鸟入门4

最新推荐文章于 2024-07-21 17:58:14 发布

小笨要阳光

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量247

点赞数

分类专栏： html 文章标签： html 优先级同级选择符类型选择符 class选择符

本文链接：https://blog.csdn.net/xiaobenyaoyangguang/article/details/77429999

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

同级选择符

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

<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

小笨要阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML菜鸟入门4

同级选择符同级选择符的样式默认后者覆盖前者<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:
复制链接

扫一扫

专栏目录