<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="tzy.css" type="text/css">
<style type="text/css">
[title]{
/*属性选择器*/
color: brown;
}
[title=te]{
/*属性选择器加值选择器*/
color: cadetblue;
}
</style>
</head>
<body>
<h1>
应用了样式表
</h1>
<h2>样式2</h2>
<h3>样式3</h3>
<p><strong>这个样式引用strong派生选择器</strong></p>
<ul>
<li>
<strong>这个会被li strong派生选择器选择</strong>
</li>
</ul>
<div id="pid"><p>这个会引用ID选择器</p></div>
<p id="ppd">这个会使用id选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
<p class="pclass">这个会引用类选择器</p>
<p class="pclass">这个会使用类选择器<a href="http://www.baidu.com">这个会使用派生选择器</a></p>
<p title="p">属性选择器引用 为指明值的可以随便写</p>
<p title="te">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
<p title="te1">属性选择器引用 指明值的如果写的不一样就执行没指明值的选择器</p>
<p id="p1">
拯救大兵瑞恩
<span>白蛇传<span>独立宣言</span></span>
</p>
<p>拯救大兵<span>白蛇传<span>肚子大了</span></span></p>
</body>
</html>
h2,h1{
/*选择器分组*/
color: blue;
font-family: 楷体;
font-size: 50px;
}
body{
/*没有定义样式的就会引用BODY里的样式（可以理解为继承）*/
color: aqua;
}
li strong{
/*派生选择器*/
color: bisque;
}
strong{
/*派生选择器*/
color: #FF00FF;
}
p span span{
/*派生选择器*/
font-family:"楷体";
}
#p{
/*id选择器用#使用*/
color: aquamarine;
}
#ppd a{
/*id选择器和派生选择器一起使用*/
color: blueviolet;
}
.pclass{
/*类选择器用.使用*/
color: darkgreen;
}
.pclass a{
/*类选择器和派生选择器一起使用*/
color: blue;
}