html+css学习笔记007-样式优先级0外链css样式表

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

心比天高

手如残废

刚学习前端的时候理解较快

老师布置的课后作业都能飞快完成

于是蜜汁自信

觉得前端不过如此

越深入的去学习

才发现自己是多么的井底之蛙

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meta charset='UTF-8'/> <!-- 网页字符编码 -->

<meta name='Keywords' content='关键词1,关键词2'/>

<meta name='Description' content='网站说明'/>

<meta name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css' /> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

/* 选择器优先级 */

*{ }
div{ }
.box{ }
#box{ } /* * < 元素名 < class < id 选择范围越广,优先级越低 */

.box{ }
.box{ } /* 选择器相同的时候,后面的样式覆盖前面 */

#box ul .li{ }
.box #ul .li{ } /* 复杂情况下,id选择器个数 > class选择器个数 > 元素名选择器个数 */

/* 选择器使用原则:准确的选中元素,利于维护 */


/* 样式表优先级 */

外链样式表 < 内嵌样式表 < 行间样式表 /* 就近原则 */

.class{... !important} /* 增加权重,高于行间样式表 */

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<div id='box' class='box'>
<ul id='ul' class='ul'>
<li id='li' class='li'></li>
<li></li>
</ul>
</div>

</body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容