<!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;}
时间： 2025-01-03 09:19:59