前端一HTML:十六: 权重有关的练习

练习一:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="权重,练习"><meta name="description" content="对网站的描述"><title>第1题</title><style type="text/css">#father #son{ color:blue;  /* 权重: 2个id选择器  0个类选择器*/}#father p.c2{color:black; /* 权重: 1个id选择器  1个类选择器 1个标签选择器*/}div.c1 p.c2{  color:red; /* 权重: 0个id选择器  2个类选择器 2个标签选择器*/}#father{color:green !important; /* 没有命中到p标签 */}div#father.c1{color:yellow; /* 没有命中到p标签 */}</style>
</head>
<body><div id="father" class="c1">div内容<p id="son" class="c2">p标签内容</p></div>
</body>
</html>

练习2:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>第2题</title><style type="text/css">#father{color:red;}p{color:blue;}</style>
</head>
<body><div id="father"><p>p标签文本</p></div>
</body>
</html>

练习3:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>第3题</title><style type="text/css">div p{color:yellow;}#father{color:red;}p.c2{color:blue;}</style>
</head>
<body><div id="father" class="c1"><p class="c2">p标签文本</p></div>
</body>
</html>

练习4:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>第4题</title><style type="text/css">div div{color:yellow;    /* 权重:  0个id选择器  0个类选择器  2个标签选择器*/}/* 标签是从右向左找  */div{color:red;   /* 权重:  0个id选择器  0个类选择器  1个标签选择器*/}</style>
</head>
<body><div><div><div>多层div包含的文本...</div></div></div>
</body>
</html>

练习5:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>第5题</title><style type="text/css">div div div div div div div div div div div div {color:yellow;    /* 权重:  0个id选择器  0个类选择器  12个标签选择器*/}.haha{color:blue;  /* 权重:  0个id选择器  1个类选择器  12个标签选择器*/}</style>
</head>
<body><div><div><div><div><div><div><div><div><div><div><div><div class="haha">很多层div包含的文本</div></div></div></div></div></div></div></div></div></div></div></div>
</body>
</html>

练习6:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>第6题</title><style type="text/css">.c1 .c2 div{color:blue ; /* 权重:  0个id选择器  2个类选择器  1个标签选择器*/}div #box3{color:green ; /* 权重:  1个id选择器  0个类选择器  1个标签选择器*/}#box1 div{color:yellow ; /* 权重:  1个id选择器  0个类选择器  1个标签选择器 */}</style>
</head>
<body><div id="box1" class="c1"><div id="box2"  class="c2"><div id="box3"  class="c3">哈哈哈  </div></div></div>
</body>
</html>

前端一HTML:十六: 权重有关的练习相关推荐

前端一HTML:十五: 权重的比较
如果选择器混合使用,那么如何确定我们的优先级? 通过权重进行比较. 那么如何计算权重呢? 通过数标签来计算. 先数id选择器的个数,再数类选择器的个数,最后数标签选择器的个数. id选择器个数不相等 ...
第十六节 springboot 打包vue代码实现前后端统一部署
svbadmin学习日志本学习日志是使用Springboot和Vue来搭建的后台管理系统: 演示地址:http://118.31.68.110:8081/index.html 账号:root 密码: ...
(建议收藏)前端面试必问的十六条HTTP网络知识体系
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.已进行四个月了,很多小伙伴表示收获颇丰. 想学源码,极力推荐订 ...
前端工程师和设计师必读文章推荐【系列三十六】
<Web 前端开发精华文章推荐>自2011年6月20号发布第一期以来,历经五年半,总共发布了30多期.今天这篇是2017年第2期(总第36期),希望你能在这里发现有用的资料. 梦想天空专注 ...
【前端】—每日5道面试题打卡（十六）
[前端]-每日5道面试题打卡(十六) 每天进步1% 不多就1% 一.输出今天的日期,以 YYYY-MM-DD 的方式,比如今天是 2021 年7 月 22 日,则输出2021-07-22 ? 二.希 ...
第十六届全国大学生智能车竞赛创意组-讯飞智慧餐厅
竞赛正式文档可以在全国大学生智能车竞赛网站下载:https://smartcar.cdstm.cn 第十六届全国大学生智能车创意组包括有三个组别: 第十六届全国大学生智能汽车竞赛创意组-百度智慧交通 ...
第十六届全国大学生智能车竞赛创意组别-航天智慧物流
竞赛正式文档可以在全国大学生智能车竞赛网站下载:https://smartcar.cdstm.cn 第十六届全国大学生智能车创意组包括有三个组别: 第十六届全国大学生智能汽车竞赛创意组-百度智慧交 ...
OpenCV学习笔记（二十六）——小试SVM算法ml OpenCV学习笔记（二十七）——基于级联分类器的目标检测objdect OpenCV学习笔记（二十八）——光流法对运动目标跟踪Video Ope
OpenCV学习笔记(二十六)--小试SVM算法ml 总感觉自己停留在码农的初级阶段,要想更上一层,就得静下心来,好好研究一下算法的东西.OpenCV作为一个计算机视觉的开源库,肯定不会只停留在数字图 ...
大白话5分钟带你走进人工智能-第二十六节决策树系列之Cart回归树及其参数(5)...
第二十六节决策树系列之Cart回归树及其参数(5) 上一节我们讲了不同的决策树对应的计算纯度的计算方法, ...

前端一HTML:十六: 权重有关的练习

练习一:

练习2:

练习3:

练习4:

练习5:

练习6:

前端一HTML:十六: 权重有关的练习相关推荐

最新文章

热门文章