当使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制时，我们经常会用到CSS选择器。为了方便初学者对选择器有所了解,传智播客将对选择器的几种类别进行详细介绍和说明。
一、 Css基本选择器
1. 传智播客解读Css基本选择器—标签选择器
给指定html元素匹配样式
语法 标签选择器{属性:属性值;属性:属性值; }
p{属性:属性值; } b { } h2{ } table{ } ul{ } ol{ } body{ }
注意：
例如：
效果
第二个案例
效果
html的结果
css样式
样式
当前的文档中的对应的所有的标签都加该样式
2. 传智播客解读Css基本选择器—Class选择器
给一类html元素加样式，每个 html标签 都有一个class属性
语法：
类选择器{属性:属性值;}
描述：
l 类用 . 表示
l 选择器名自定义 ,开头通常是字母 ，不能含有中文
错误 ( .11111 .冰冰) .11111{ } .b{ } .a{ }
正确 .abc1
.myclass{ } .abc_def_aaa{ } .abceff_one{ }
设置好样式之后，必须的引用
<标签 class=”选择器名”>
注意：引入的时候选择器没有.
效果
注意：可以给不同的标签加该样式
3. 传智播客解读Css基本选择器—ID选择器
语法：
id选择器 {属性:属性值; }
描述:
l id用#来表示
l 选择器 名可以自定义 定义规则和class定义规则是一样
#myid{ } #one_two_three{ }
#one1{ }
效果
注意：id选择器只能引用一次，给javascript用，如果想引入多次，class
id=“id选择器名”，只能出现在html的标签里面一次
给特定的 html元素加特定的样式
4. 传智播客解读Css基本选择器—通用选择器 *通配符
*{属性:属性值;}
html body p ol ul li 。。。。
所有的标签都加样式
5. 传智播客解读Css基本选择器—伪类选择器
链接 的伪类，通常是给链接用。已经限定好了
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移到链接上
a:active 单击鼠标左键的那一刻
注意： 顺序不能颠倒，
固定的模式
效果
二、 css复合选择器
1. 传智播客解读复合选择器—分组选择器
给多个元素加同一个样式，也就是多个元素有共有的属性和值
语法：
选择器,选择器,选择器{相同的属性:属性值; }
例如
2. 传智播客解读复合选择器—后代选择器(包含选择器)
就是给html元素中的后代元素加样式
格式：选择器1 选择器2 {属性:属性值;}
选择器1 里面的选择器2
柳岩
李易峰
l .list1 ul li a{ }
l .list1 li a{ }
l .list1 a{ }
/一键排版/lib/”aa.jpg”){kind=small}
l .lzz .bb p img{ }
l .lzz .bb img{ }
l .bb img{ }
l .lzz img{ }
3. 传智播客解读复合选择器—子元素选择器
语法 选择器>选择器 { }
好好学习
天天向上
只跨越一层
给某个html元素的子元素加样式
子元素是：就是某元素里面的第一层级的元素
4. 传智播客解读复合选择器—相邻元素选择器 了解
可选择紧接在另一元素后的元素，必须有一个父元素 ，兄弟之间可以这样写
格式 :选择器+选择器{ }
5. 传智播客解读复合选择器—属性选择器
l 选择器[属性]{ }
属性是html的属性
l 选择器[属性=”属性值”] { }
l 选择器[属性^=”属性值”] { }
^开头
$结尾
l 选择器[属性$=”属性值”]{ }
