<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8"> ??<!-- 指定编码 -->
???<title>liudaozhang</title>
???<link rel="shortcut icon" href="http://www.xxxxx.cn:80/wp-content/logo.jpg">
???<!--<link rel="stylesheet" href="jjj.css"> ?这是第三种___引入css-->
???<!--<link rel="stylesheet" href="jjj2.css"> ?这是第三种___引入css-->
???<style>
???????/*id选择器 ??这是第二种方式*/
???????/*#i1{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
/*这里会先引用style中的标签，然后在引用link中jjj2 ?再试jjj中的标签*/
???????/*class选择器*/
???????/*.c1{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
???????/*标签选择器*/
???????/*div {*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
???????/*标签层级选择器 ?--行内标签无法应用 ?宽 ?高等属性*/
???????/*div span{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
???????/*class层级选择器*/
???????/*.c2 span{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
???????/*id层级选择器*/
???????/*#i2 span{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????/*}*/
???????/*id组合选择器*/
???????/*#i1,#i2,#i3{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????????/*margin-top: 5px; 间隔作用*/
???????/*}*/
???????/*class组合选择器*/
???????/*.c1,.c2,.c3{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????????/*margin-top: 5px;*/
???????/*}*/
???????/*属性选择器*/
???????/*div[jjj=‘abc‘]{*/
???????????/*height: 100px;*/
???????????/*width: 100px;*/
???????????/**/
???????????/*margin-top: 5px;*/
???????/*}*/
???</style>
</head>
<body>
<!--1、可以在任意标签中添加style属性，增加css样式-->
<!--<div style="height: 100px;width: 100px;border:red 2px solid;"></div>-->
<!--<div id="i1"></div> ?引入i1选择器-->
<!--2、head中style添加css样式-->
<!--理解：在标签当中增加了一个id的属性 他的属性就是i1 在head中通过style标签，以id选择器的方式 #i1写了一个css样式 他引用到了div这个标签上-->
<!--简单的说 就是在head中写了id选择器i1 写了css样式 在后面的div标签中引用了这个-->
<!--3、引入 css-->
<!--<div id="i2"></div> ?引入i2选择器-->
<!--选择器在是唯一的 ?不能重复 ?重复就会报错-->
<!--测试三种引入css样式的方式的优先级-->
<!--<div id="i1" style="height: 100px;width: 100px;"></div>-->
<!--顺序 ?先引用--这里是为了测试优先级 所以选择器都是使用的i1-->
<!--1、 标签中css ?style属性 ?优先级最高 ?也就是div后面的优先级别是最高的-->
<!--2、引入的css和head中的style中的标签的优先级 ?主要是看在head中是由下往上一次查找 那个在最下面就先被引用-->
<!--id选择器不能重复 ?但是class是可以重复的-->
<!--<div class="c1"></div> ?class选择器-->
<!--<div class="c1"></div>-->
<!--<div></div> ?/*标签选择器*/-->
<!--<div>-->
???<!--行内标签无法应用 ?宽 ?高 ?--层级选择器-->
???<!--<span>1</span>-->
<!--</div>-->
<!--<div> ??class层级选择器-->
???<!--行内标签无法应用 ?宽 ?高 ?--层级选择器-->
???<!--<div class="c2">-->
???????<!--<span>12222</span>-->
???<!--</div>-->
<!--</div>-->
<!--<div> ?id层级选择器-->
???<!--<div id="i2">-->
???????<!--<span>2222</span>-->
???<!--</div>-->
<!--</div>-->
<!--<div id="i1"></div> ?id组合选择器-->
<!--<div id="i2"></div>-->
<!--<div id="i3"></div>-->
<!--<div class="c1"></div> ?class组合选择器-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->
<!--<div jjj="abc"></div> ??属性选择器-->
</body>
</html>
html基础-css-选择器
原文地址：https://www.cnblogs.com/zunchang/p/8283382.html