CSS初级：CSS的引入，选择器的优先级和权重

字母的小草

于 2019-08-06 11:45:07 发布

阅读量851

点赞数

分类专栏： CSS 文章标签： CSS初级 CSS引入 CSS选择器优先级 CSS选择器权重

本文链接：https://blog.csdn.net/weixin_43641971/article/details/98600261

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS的引入方法，包括内联样式、内部样式表和外部样式表。同时，详细解析了CSS选择器的优先级和权重概念，帮助初学者掌握如何有效地控制样式应用。

摘要由CSDN通过智能技术生成

    <!--html+css
    **补充知识点：**
    浏览器内核：
    主流浏览器：有市场份额+有自己的内核
    浏览器=shell(外形)+内核
    	IE：trident
    	Chrome：Webit ==> blink
    	FireFox：Gecko
    	Safari：Webit
    	Opera: presto
    	
    域名===>dns解析===>IP地址
    html代码读取一行执行一行，所有css文件一起加载进去(异步执行，多段代码一起执行)
    
    css选择器的优先级本质是css选择器的权重的比较
    css选择器的权重：
    	！important					Infinity(正无穷)
    	行间样式						1000(256进制)
    	id							100
    	class|属性选择器|伪类选择器	10
    	标签选择器|伪元素选择器		1
    	通配符						0
    	ps:计算机中 Infinity > Infinity+1 ...
    -->
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title>CSS-1.0</title>
    		<link rel="stylesheet" href="css-1.0.css" />
    		<!--引入外部css文件-->
    	</head>
    	<body>
    		<!--css: cascading style sheet 层叠样式表--> 
    		
    		<!--引入css:
    			1.行间样式：在style中写:<div style=""></div>
    			2.页面级css:在head标签中写一个style标签，然后在里面写css代码
    				<style type="text/css">/*type="text/css"可以不写*/
    					div{
    						width:100px;
    						height:100px;
    						background-color:palevioletred;
    					}
    				</style>
    			3.外部css文件-->
    <!--			
    		选择器：
    			1.id选择器: 
    				html文件中：<div id="oneOnlyId"></div>
    				css文件中：#oneOnlyId {...样式代码...}
    				一对一：id唯一，一个id只能修饰一个标签，一个标签只能有一个id(一对一)
    			2.class选择器：
    				html文件中：<div class="classChDemo1 classChDemo2"></div>
    				css文件中：.classChDemo {...样式代码...}  classChDemo2{ ... }
    				多对多：每个标签都可以有多个class(之间用空格隔开)，一个class可以作用于多个标签
    			3.标签选择器：
    				html文件中：<p></p>
    				css文件中：p {...样式代码...}
    				选择所有对应标签:这样，html中所有的p标签(不管在哪)都会有对应的样式
    			4.通配符选择器：
    				css文件中：* {...样式代码...}
    				所有的标签全都作用，包括body、head、html
    			5.属性选择器：如
    				css文件中：[color] {...样式代码...}  [color=“”] {...样式代码...}
    				html文件中有color属性(和对应值)的标签全部都可以选择出来
    				优先级：class=属性选择器，谁在后显示谁，后面覆盖前面
    			6.加强---！important---
    				css文件中：p {...样式代码...!important}
    				强于行间样式选择器
    			选择器的优先级：越专一、越优先
    				!important > 行间样式  > id > class=属性选择器  > 标签 > *
    			
    	-->
    
    	</body>
    </html>