1、通用选择符（通配符）：*
CSS样式
*{ color: #000000; }
p{color: #0000FF; }
p *{color: #FF0000;}
HTML代码
<p>蓝色</p>
<div>黑色</div>
<p>蓝色，<span>红色，</span><em>红色，</em><strong>红色，</strong>很神奇！</p>
效果图
2、类选择符：.类名
使用之前
使用之前
使用之后
使用类区分之后
源码
<p>CSS很强大，可以控制页面中任何元素的表现形式</p>
<p class="second">与众不同，突出个性</p>
<p>与世界同步，做一个成功的页面</p>
CSS样式
3、包含选择符（派生/后代选择符）：元素 子元素（div p）
作用于某个元素中的子元素
示例效果：
包含选择符例子
源码：
-
CSS
p strong{ color: #FF0000; font-size: 18px; text-decoration: underline; } -
HTML
<p>CSS很强大，<strong>可以控制页面中<span>任何元素</span>的表现形式</strong></p> <p class="second">与众不同，突出个性</p> <strong>与世界同步，做一个成功的页面</strong>
特别说明：
p span和p strong span的效果一样
p span & p strong span
4、子选择符（对象选择符）：>
定义子元素对象的样式，html同上。
效果图：
body > strong
CSS样式：
CSS样式
5、相邻选择符：+
匹配同一父级下某个元素之后的元素，HTML代码见包含选择符中
效果图：
p + strong
CSS样式：
CSS样式
6、属性选择符：是在标签中直接使用，不能在CSS文件中
模式
- E[atttr]：具有某个属性的所有标签
- E[atttr="value"]：属性值等于某个值的标签
- E[atttr~="value"]：属性的属性值用空格隔开的标签
- E[atttr|="value"]：属性的属性值必须以value开始及使用连字符“-”分割的标签E
E：表示任一标签
attr：标签E的任一属性
value：属性的属性值
注：当属性值没有空格只是一个单词时，“=”、“|=”和“~=”效果一样
示例效果图：
属性选择符
CSS样式：
HTML：
p class="paragraphs">带class属性的段落标签p</p>
<a href="http://www.baidu.com">没有class属性的标签a</a>
<p>这个没有class属性</p>
<a href="http://www.google.com" class="link">带class属性的链接标签a</a>
7、ID选择符：#
同一个页面中ID最好唯一
源码
-
HTML代码：
<p class="paragraphs">带class属性的段落标签p</p> <a href="http://www.baidu.com">没有class属性的标签a</a> <p id="paragraphs">这个没有class属性</p> <a href="http://www.google.com" class="link">带class属性的链接标签a</a> -
CSS样式：
CSS样式
效果图：
8、选择符的组合关系
- 针对性使用类选择符或者ID选择符
- 选择符群组：使用英文逗号隔开多个选择符
- 选择符组合：选择符之间使用空格分割且为父子关系
个人感觉选择符组合的使用和包含选择符一样的
9、伪类
语法
选择符：伪类{属性：属性值；}
使用对象
经常是a标签使用
a:link{}：链接默认状态
a:visited{}：链接访问后状态
a:hover{}：鼠标放在链接上状态
a:active{}：链接点击时状态
10、伪对象
在HTML文档指定的信息之外，创建了文档的额外信息。
语法
选择符：伪对象{属性：属性值；}
使用示例
