<!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>
css文件tzy.css
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;
}HTML学习笔记 CSS学习选择器 第五节 （原创）
原文地址：http://www.cnblogs.com/ttzzyy/p/7499868.html