CSS选择符总结

一、类型选择符

特点：

1.所有的html标签都可以用作类型选择符

2.可以选中当前结构里所有指定标签

例：

div{}    //选中所有div标签

.nav a{}    //选中class类名名为"nav"中的所有a标签

二、id选择符

特点：

1.具有唯一性，在一个页面中一个id类名只能对应一个标签    //通常用于搭建网页的外围结构

例：

<div id="nav"></div>    //给div标签起了一个id类名

#nav{}    //选中id类名为"nav"的标签

三、class选择符

特点：

1.一个元素可以有多个类名，多个元素也可以取同一个类名

2.可以制定一类样式    //需要制定相同样式的标签取同一个class类名

例：

<div class="nav-con box"></div>    //给div标签起了两个class类名

.nav-con{}    //选中class类名为"nav-con"的所有标签

四、群组选择符

特点：

1.将多个选择器以逗号作为分隔的方式组成一组进行统一的样式制定

例 ：

#nav,.box,p{width:100px;}    //将id类名为"nav"class类名为"box"和所有p标签的宽度制定为100像素

五、包含选择器

特点：

1.通过父元素确定所要制定的那个子元素

例：

.nav .box{height:100px;}    //将class类名为"nav"中class类名为"box"的子元素的高度制定为100像素

六、伪类选择器

特点：

1.满足某个条件则制定某种样式

2.可用于制定"行为"

例:

a:link{color:#000;}    //链接未访问时字体颜色为黑色

a:visited{color:#fff;}    //链接已访问时字体颜色为白色

.box:hover{background:#ccc;}    //在鼠标滑到class类名为''box''的标签所占据的空间里时标签背景颜色变为灰色

.box:active{width:100px;}    //在鼠标处于''class''类名为box的标签所占据的空间中按下时标签高度变为100像素

七、通配符

特点：

1.可选中页面中的所有标签，通常用于制定统一样式

例：

*{margin:0;padding:0;}    //将所有标签的外部间距和内部间距制定为0像素