Selector,Selector,Selector {property:value;property:value...}
以下是一份html:
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">css给我们带来丰富多彩的世界</div> <br> <div class="cs">帝王注定孤独!</div> <br> <div title="dt">江山与她何干!</div>
h2 { color: red; } div { color: red; }
#p1 { color:#00ff00; font-size: 40px; }
.cs { color: blue; }
[title] { color: gray; font-size: 20px; }
b. 根据属性名和属性值来匹配, 将属性名和值用[]包含起来
[title='dt'] { color: gray; font-size: 20px; }
* { font-size: 30px; }
h2,#p1,.cs { color:green; }
<h2>通过样式表来改变网页外表</h2> <p id="p1">欢迎来到CSS世界</p> <div class="cs">帝王注定孤独</div> <br> <div class="cs">江山与她何干!</div> <br>
div span { color: blue; } <div title="dt"> <h3> <span>帝王注定孤独!</span> </h3> <span>江山与她何干!</span> </div>
div>span { color: green; } <div title="dt"> <h3> <span>帝王注定孤独!</span> </h3> <span>江山与她何干!</span> </div>
h3+span { color: orange; } <div title="dt"> <h3> <span>帝王注定孤独!</span> </h3> <span>江山与她何干!</span> </div>
5) 超链接相关选择器
<html> <head> <title>测试: 内部样式表</title> <style type="text/css"> a:link{ color:block; text-decoration:none; } a:hover { text-decoration:underline ; } a:visited{ color:red; } </style> </head> <body> <a href="#">这里是一个超级链接</a> </body> </html>
原文地址:http://blog.csdn.net/u011794238/article/details/46043603