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