<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：offline
时间：2018-04-10
描述：优先级
导入外部样式 优先级：内联>内部>外联
-->
<link rel="stylesheet" href="css/new_file.css" />
<style type="text/css">
/*
*样式的标签选择器，范围最小，优先级最低
* */
h1{
color: red;
}
/*
样式的类选择器，通过calss属性去引入，优先级高于标签选择器
* */
.h{
color: #FF0000;
font-size: 50px;
}
/*
id选择器,通过id属性引入，id优先级高于类选择器
* */
#id1{
color: palevioletred;
}
/*
组合共享样式
* */
h1,h2,h3,p,div{
background-image: url(img/mm.png);
}
/*
只要是同级并且同类型的均可组合共享
* */
/*
样式嵌套，只作用于div内部的p标签，div之外的p标签不起作用
* */
div p{
background-image: url(img/tu5.png);
}
.class3 p{
}
#id4 p{
}
/*
选择器的优先级：ID>类选择器>标签选择器>全局选择器
* */
*{
font-size: 80px;
}
</style>
</head>
<body>
<h1 style="color: yellow;" id="id1">这只是一种练习</h1>
<h1 class="h">这只是一种练习1</h1>
<h1 id="id1">这只是一种练习2</h1>
<h2 class="h">我是h2标题</h2>
<h3 class="h a">我是h3标题</h3>
<h1>干啥set如果花色苷</h1>
<div>jsgf给社会不是</div>
<div id="id1">
<p>我是div里面的p标签</p>
</div>
<p>段落</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：offline
时间：2018-04-10
描述：优先级
导入外部样式 优先级：内联>内部>外联
-->
<link rel="stylesheet" href="css/new_file.css" />
<style type="text/css">
/*
*样式的标签选择器，范围最小，优先级最低
* */
h1{
color: red;
}
/*
样式的类选择器，通过calss属性去引入，优先级高于标签选择器
* */
.h{
color: #FF0000;
font-size: 50px;
}
/*
id选择器,通过id属性引入，id优先级高于类选择器
* */
#id1{
color: palevioletred;
}
/*
组合共享样式
* */
h1,h2,h3,p,div{
background-image: url(img/mm.png);
}
/*
只要是同级并且同类型的均可组合共享
* */
/*
样式嵌套，只作用于div内部的p标签，div之外的p标签不起作用
* */
div p{
background-image: url(img/tu5.png);
}
.class3 p{
}
#id4 p{
}
/*
选择器的优先级：ID>类选择器>标签选择器>全局选择器
* */
*{
font-size: 80px;
}
</style>
</head>
<body>
<h1 style="color: yellow;" id="id1">这只是一种练习</h1>
<h1 class="h">这只是一种练习1</h1>
<h1 id="id1">这只是一种练习2</h1>
<h2 class="h">我是h2标题</h2>
<h3 class="h a">我是h3标题</h3>
<h1>干啥set如果花色苷</h1>
<div>jsgf给社会不是</div>
<div id="id1">
<p>我是div里面的p标签</p>
</div>
<p>段落</p>
</body>
</html>
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
