css选择器

（一）CSS基本选择器

1.标签选择器

标签选择器，匹配网页中和选择器同名的标签

格式：标签名{属性1:属性值1;
属性2:属性值2;}

实列
div{

border:1px solid #ff33cc;

}

2.类选择器(class选择器，使用较多)

作用：选择并操作和标签的类名相同的网页元素

格式：以点开头

实列 
.box{

width:100px；

margin:0 auto;

padding:20px;

}

3.id选择器

作用是：选择并操作和标签的id名相同的网页元素

格式：以#开头

实列

#ids{

font-size:30px;

}

4、* 通用选择器

*：代表了网页上所有的标签元素

IE低版本不支持,解决办法：将网页中的所有标签列举出来

（二）CSS组合选择器

1、多元素选择器:

使用逗号分隔的多个选择器，即为多元素选择器

作用：同时给多个选择器增加样式

实列：body,div,h1,p{

margin:10px;

padding:10px;

}

2、后代（层级）元素选择器：

使用空格分隔的多个选择器，

即为后代元素选择器。

作用：给后代元素增加样式。

.box p{

font-size:20px;

}

3、子元素选择器：只有两个级别

以大于号连接的选择器，叫做子元素选择器。

格式：E > F{属性：属性值；}

 

子元素选择器，只会匹配“儿子辈”，层级关系只能有两级
.box>p {

margin:10px;

}

4、相邻元素选择器

E + F{属性：属性值；}

匹配的是和E标签，相邻的F元素。层级关系要满足：必须是同级关系（并列）。

（三）伪类选择器

作用:匹配超链接a标签的不同的状态。

超链接有四种状态：

:link   超链接访问前的状态（正常状态）

:hover  当鼠标覆盖超链接时的状态

:active  激活状态，鼠标点击的那一瞬间的状态（鼠标被按住时的状态）

:visited  被访问后的状态

将鼠标覆盖、超链接激活的一瞬间设置为相同的

a:link,a:visited{text-decoration:none;color:#f0f0f0;}   //设置没有下划线，灰色

a:hover,a:active{text-decoration:underline;color:#ff0000;}//设置下划线，红色

（四）属性选择器

作用：找到有某种属性的标签，然后加样式

1、  E[attr]

找到设置了某个属性的标签，然后设置样式

<pclass=”p1” width=”500” height=”300”>

p[class]  可以

p[width] 可以找到

p[align] 不能找到

2、E[attr=value]

找到设置了某个属性attr的标签，并且属性值为指定的值  的标签

<pclass=”p1” width=”500” height=”300”>

p[class=p1] 可以

p[class=p2]  找不到