1、通配符选择符
所谓通配符，其实就是一个星号而已，通配符选择符一般是用来对页面所有的元素来应用其样式。如：
*{margin：0;padding：0;}将页面的所有元素的内外边距都设为0
p *{color:#f00;}将P标签后的所有后代元素的颜色设置为红色;
2、类选择符
类 class,可以将一段样式定义一个类，在需要的位置可以重复调用;
类在css中，必须以小点.作为前缀，紧跟一个具有语义的自定义类名;
3、包含选择符
包含选择符和怒多人称他为派生选择符或者后代选择器，因为该选择符的类型是作用于某个元素的子元素。比如我们将P标签的strong标签定义样式，那么就可以这样定义：
p strong{font：18px/140% 400;} 定义标签 定义文字去除加粗、18像素，行高140%
4、子选择符
子选择符也称作对象选择符，其主要作用是定义子元素对象的样式，无法定义子元素以外的对象。选择符和选择符之间要用 > 符合才是子选择符。例如我们要定义body标签下的子元素strong标签的样式：
body > strong {colore:ff0000;}定义P标签所汉堡的span标签的文字为红色。
<style type="text/css">
body > strong {
color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/
font-size:28px; /*定义文字大小为18px*/
text-decoration:underline; /*定义文字具有下划线*/
}
</style>
<title>子选择符</title>
</head>
<body>
<p>CSS很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong ></p>
<strong>与世界同步，做一个成功的页面仔</strong>
第一个strong标签与body标签的关系是：body>p>strong 而不是body>strong 的关系，不紧挨着，所以不显示红色。
注意：子选择符不是所有的浏览器都是支持的，只有在IE7 以上的版本才是支持的。
5、相邻选择符
相邻选择符和子选择符非常类似，只是将中间的>换成了+,但是功能却差距很大。其主要作用是：匹配同一个父级元素下某个元素之后的元素。
<style type="text/css">
p + strong {
color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/
font-size:28px; /*定义文字大小为18px*/
text-decoration:underline; /*定义文字具有下划线*/
}
</style>
<title>相邻选择符</title>
</head>
<body>
<p>CSS很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong ></p>
<strong>与世界同步，做一个成功的页面仔</strong>
<strong>与世界同步与世界同步</strong>
</body>
P标签和strongs是相邻的关系，P标签和strong标签是相互包含的关系，所有P标签和STRONG标签不变成红色。
6、属性选择符
属性选择符的格式是在标签元素后紧跟一对中括号，中括号里的内容就是该标签元素的属性或者表达式。属性选择符有4中样式。
6.1 E[attr]
<style type="text/css">
*[class] {
color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/
font-size:28px; /*定义文字大小为18px*/
}
</style>
<title>E[attr]属性选择符</title>
</head>
<body>
<p class="paragraphs">带class属性的段落标签p</p>
<a href="http://www.jujian.org">没有class属性的连接标签a</a>
<p>这个是没有class属性的段落标签p</p>
<a href="http://www.wlyxe.cn" class="myLink">带class属性的连接标签a</a>
</body>
可以发现，页面中所有带有call属性的任何一个标签都定义为红色、文字大小为18像素。
6.2 E[attr="value"]
<style type="text/css">
input[type="text"] {
text-align:center;
border:3px solid #FF0000;
background-color:#E8E8E8;
} /* 定义type属性值为text的input标签元素的样式 */
</style>
<title>E[attr="value"]属性选择符</title>
</head>
<body>
<form method="post" action="">
<input type="text" value="这个是文本框" /> <input type="password" value="这个是密码框" />
</form>
</body>
可以看到type属性值为text的标签元素都被重新定义了。
6.3 E[attr~="value"] 空格隔开
E[attr~="value"]是具有attr属性值并且是用空格隔开的字段，并且属性值等于value的E标签元素.
<style type="text/css">
p[title~="css"] {
font-size:40px;
color:#FF0000;
margin:0;
}
</style>
<title>E[attr~="value"]属性选择符</title>
</head>
<body>
<p title="css xhtml">title属性值为xhtml css的段落标签p</p>
<p title="css+xhtml">title属性值为css xhtml的段落标签p</p>
<p title="Cascading Style Sheets（层叠样式表）的简称为 css">title属性值为“Cascading Style Sheets（层叠样式表）的简称为css”的段落标签p</p>
</body>
6.4 E[attr|="value"] 使用连接符 - 隔开的
E[attr|="value"] 匹配具有 attr 属性且属性值是value值开始，并使用连字符-分开的E标签元素。
<style type="text/css">
p[title|="css"] {
font-size:29px;
color:#FF0000;
margin:0;
}
</style>
<title>E[attr|="value"]属性选择符</title>
</head>
<body>
<p title="xhtml-css">title属性值为xhtml-css的段落标签p</p>
<p title="css+xhtml">title属性值为css+xhtml的段落标签p</p>
<p title="css-Cascading Style Sheets（层叠样式表）的简称">title属性值为“css-Cascading Style Sheets（层叠样式表）的简称”的段落标签p</p>
</body>
只有第三段标签的P中的title属性值是以CSS字段开始并以连字符 - 分隔的，所以只有第三段标签P才会被重新定义。
7、ID选择符
ID选择符和类选择符比较相近，类选择符是用 . 分开的，ID选择符是用# 分开的。一个页面中不能出现同名的ID选择符，并且只能被使用一次，其权限比类选择符要高，因为ID选择符在JS中用的比较多，容易出现脚本错误，请谨慎使用。
<style type="text/css">
#myContent {
font-weight:bold; /*加粗文字*/
color:#0000FF; /*定义文字颜色为蓝色*/
}
</style>
</head>
<body>
<p>CSS很强大，可以控制页面中任何元素的表现方式</p>
<p id="myContent">与众不同，突出个性</p>
</body>
8、选择符的组合关系
选择符的使用最大的优势不是单枪匹马奋斗，而应该是针对不同的页面结构组合成各种不同的方阵。其主要体现在针对性使用类选择符和ID选择符、选择符群组及选择符组合，这三种方式。
8.1 针对性使用类选择符：
例如：页面中所有的标签元素的类名都叫做. 没有content,需要将段落标签P的样式定义为字体颜色为红色、大小为28px;
<style type="text/css">
.myContent {
font-size:12px; /* 将页面中所有类名为myContent的标签中文字定义为12px */
}
p.myContent {
font-size:28px;
text-decoration:underline;
color:#FF0000;
} /* 定义类名为myContent的段落标签p的样式 */
</style>
<title>针对性选择符</title>
</head>
<body>
<span class="myContent">span标签内的文字，类名myContent</span>
<div class="myContent">div标签内的文字，类名为myContent</div>
<strong class="myContent">strong标签内的文字，类名为myContent</strong>
<p class="myContent">p标签内的文字，类名为myContent</p>
<p>p标签内的文字，无任何类名</p>
</body>
8.2 选择符群组 （，逗号分开）
顾名思义，选择符群组就是将多个相同定义的选择符组合并。
<style type="text/css">
p, .myContent, #title {
font-size:18px;
color:#FF0000;
}
</style>
<title>群组选择符</title>
</head>
<body>
<p>这个是段落标签p内的文字</p>
<span class="myContent">这个是标签span内的文字</span>
<h3 id="title">这个是标题标签h3内的文字</h3>
<div>为什么上面的几个标签都是红色、18px的文字，而我这个div标签内的文字却不是啊！</div>
</body>
将段落标签 P 类选择符myContent,，ID选择符 title，都重新定义了。
在选择符群组中，每个选择符之间都使用英文逗号,隔开，作为间隔号，选择符之间的关系为并列关系。
8.3 选择符组合（ 空格分开）
选择符组合，根据HTML的结构关系，层层递进的罗列选择符，目标选择符为最后一个选择符。每个选择符之间使用空格分开，他们是父子关系。
<style type="text/css">
p span {
color:yellow;
color:#f00;
font-size:30px;
}/*定义p标签中的子标签span的文字颜色为红色*/
</style>
<title>选择符的组合</title>
</head>
<body>
<p>我是段落标签p中的文字，包含了<span>span标签</span>，但<span>span标签的文字居然是红色的</span>，神奇啊！</p>
</body>
仔细看完以上的例子，相信你你对CSS选择符有了一定的了解了。