(一)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] 找不到