CSS样式
<style type="text/css">
tt.tt1 {
<style type="text/css"> p { background-color:yellow; font-size:xx-small; } </style> <p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <tt>床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
样式2 . 是Class选择器
background-color:red; } tt.tt2 { font-size:xx-large; } tt.tt3 { background-color:red; } </style> <body> <tt class="tt1">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt> <tt class="tt1">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt> <tt class="tt2">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt> <tt class="tt3">床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt> </body>
样式3
<style type="text/css"> p { background-color:yellow; } tt { background-color:green; } </style> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <p>今天天气好晴朗，处处好风光</p> <tt>床前明月光，疑是地上霜。举头望明月，我叫郭德纲</tt>
I的选择器 #是ID 选择器
<style type="text/css"> .p1 { background-color:red; } #p2 { background-color:green; } #p3 { background-color:blue; } #p4 { background-color:black; } <p class="p1">今天天气好晴朗</p> <p class="p1">今天天气好晴朗</p> <p id="p2">今天天气好晴朗</p> <p id="p3">今天天气好晴朗</p> <p id="p4">今天天气好晴朗</p>
关联选择器
<style type="text/css"> p em { background-color:red; } </style> <p><em>今天天气好晴朗</em></p>
伪元素选择器
a:link {color: #FF0000} /* 未访问时的状态 */ text
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */
first-letter 伪元素,匹配了第一个字母(
P::first-line {第一行
<style type="text/css"> A:active { text-decoration:none; } A:hover { font-size:xx-large; } P::first-letter { font-size:xx-small; } P::first-line { font-size:xx-large; } </style> <p>晋太元中，武陵人捕鱼为业，缘溪行，绕路之远近，忽逢桃花林，夹岸数百步<br/> 晋太元中，武陵人捕鱼为业，缘溪行，绕路之远近，忽逢桃花林，夹岸数百步 </p> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</
组合选择器
<style type="text/css"> h1, h2, h3, h4, h5, h6, td { background-color:red; } <h1>我是一个粉刷匠</h1> <h2>我是一个粉刷匠</h2> <h3>我是一个粉刷匠</h3> <h4>我是一个粉刷匠</h4> <h5>我是一个粉刷匠</h5> <h6>我是一个粉刷匠</h6>