<!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;}HTML学习笔记 CSS学习选择器案例 第五节 （原创） 参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7512984.html