当使用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{ }

设置好样式之后，必须的引用

注意：引入的时候选择器没有.

效果

注意：可以给不同的标签加该样式

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{ }

l.lzz.bb p img{ }

l.lzz.bb img{ }

l.bb img{ }

l.lzz img{ }

3.传智播客解读复合选择器—子元素选择器

语法选择器>选择器 { }

好好学习

天天向上

只跨越一层

给某个html元素的子元素加样式

子元素是：就是某元素里面的第一层级的元素

4.传智播客解读复合选择器—相邻元素选择器了解

可选择紧接在另一元素后的元素，必须有一个父元素，兄弟之间可以这样写

格式:选择器+选择器{ }

5.传智播客解读复合选择器—属性选择器

l选择器[属性]{ }

属性是html的属性

l选择器[属性=”属性值”] { }

l选择器[属性^=”属性值”] { }

^开头

$结尾

l选择器[属性$=”属性值”]{ }