写给初学者css优先级问题_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

写给初学者css优先级问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

首先需要搞清楚几个基本概念<br />　　1.内嵌样式：<br />　　　　写在元素标签内的例如：<div style="background-color:red">   </div><br />　　2.内联样式：<br />　　　　写在head的style例如：<head><br />　　　　　　　　　　　　　　　　　　<style><br />　　　　　　　　　　　　　　　　　　　　　　div{<br />　　　　　　　　　　　　　　　　　　　　　　　　　　background-color:red;<br />　　　　　　　　　　　　　　　　　　　　　　　　}<br />　　　　　　　　　　　　　　　　　　</style><br />　　　　　　　　　　　　　　　</head><br />　　3.外部样式：<br />　　　　link标签引入进来的例如：<link rel="stylesheet" href="1.css"/><br />   4.important:只要设置了important的优先级永远最高。例如：border:1px solid red !important;　　<br />　　优先级：！important > 内嵌（标签内）> 内联（style）=外部;<br />说明：这里很多初学者都会误会内联优先级要高与外部，实际上是相等的。例如：<br />　　　　<head><br />　　　　　　　　<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}<br />　　　　　　　　<style><br />　　　　　　　　　　div{

登录后复制

　　　　　　　　　　　　　　background-color；red;<br />　　　　　　　　　}<br />　　　　　　　</style><br />　　　　</head><br />　　　　此时div的背景色为red;<br />

登录后复制

　　　　<head><br />　　　　　　　　<style><br />　　　　　　　　　　div{

登录后复制

　　　　　　　　　　　　　　background-color；red;<br />　　　　　　　　　}<br />　　　　　　　</style><br />　　　　　　　<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}<br />　　　 </head>

登录后复制

　　　　此时div的背景色为blue；<br />

登录后复制

选择器权重值：内嵌：1000；<br />　　　　id:0100;<br />　　　　class或伪类：0010；<br />　　　　元素或伪元素：0001；<br />　　　　*：0000；<br />说明：权重值越大优先级越高；权重值可以累加，但是不会越位，例如：<br />　　　　嵌套十层div，然后有一个div元素选择器，该选择的权重值为000 10，而不是0010，仍旧比class或伪类选择器的权重值小。

登录后复制

权重值：内嵌（1000）>id（0100）>class/伪类（0010）>元素/伪元素（0001）> * 权重值越高优先级越高。 important永远最高。

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7748

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1291

PHP教程

1234

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。