1、标签指定式选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器</title>
<!--
标签指定式选择器又称交集选择器,由俩个选择器构成,
其中一个为标记选择器,第二个为class选择器或id选择器
-->
<style type="text/css">
p{color: blue;}
.special{color: green;font-size: 18px;}
p.special{color: red;font-size: 16px;}
</style>
</head>
<body>
<p>通过标记选择器指定字体为蓝色的普通文本。</p>
<h3 class="special">通过类选择器指定的标题文本,设置字号为18像素,颜色为绿色</h3>
<p class="special">通过类选择器指定的标题文本,设置字号为16像素,颜色为红色</p>
</body>
</html>
2、后代选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<!--
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,
内层标记写在后面,中间用空格分隔.
当标记发生嵌套时,内层标记就成为外层标记的后代
后代选择器可以添加多个元素,如需添加只需在元素之间加上空格即可
-->
<style type="text/css">
p strong{color: red;font-size: 18px;} /*后代选择器*/
strong{ color: blue; font-style: italic;}
</style>
</head>
<body>
<p>这是一段在段落文本中<strong>嵌套strong标记定义的文本(红色).</strong></p>
<strong>这是在嵌套之外由strong标记定义的又一段文本(蓝色).</strong>
</body>
</html>
3、并集选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<!--
并集选择器是各个选择器通过逗号链接而成,任何形式的选择器(包括标记、class类、id选择器等)
都可以作为并集选择器的一种。
如果某些样式选择器定义的样式完全相同或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
-->
<style type="text/css">
h2,h3,p{ font-size: 18px;} /*不同标记组成的并集选择器*/
h3,.special,#one{font-family: "微软雅黑";color: red;text-decoration: underline;} /*标记、类、id组成的并集选择器*/
</style>
</head>
<body>
<h2>二级标题,默认18像素文本效果.</h2>
<h3>三级标题,显示楷体、红色、下划线效果.</h3>
<p class="special">段落文本1,显示楷体、红色、下划线效果.</p>
<p>段落文本2,默认18像素文本效果</p>
<p id="one">段落文本3,显示楷体、红色、下划线效果.</p>
</body>
</html>