css基础选择器
一、标签选择器:
标签选择器是直接将HTML标签作为选择器,如:
p{font:14px;}
二、id选择器:
给页面元素定义id。
#div1{
margin:0 auto;
background:#ccc;
color:#c00;
}
三、类(class)选择器:
在CSS里用一个点开头表示类别选择器定义,例如:
.div1{
color:#f60;
font-size:14px;
}
四、群组选择器:
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔 (这里逗号称之为结合符)。如:
p,td,li{
line-height:20px;
color:#c00;
}
使用组群选择器,将会大大的减化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率与CSS文件体积。
五、后代选择器:
后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式,例如:
ul li{
font-style:italic;
font-weight:800;
color:#f00;
}
六、相邻兄弟选择器
只会匹配紧跟着 的兄弟元素
#wrap #first + .inner{
color:#000;
}
七、通用兄弟选择器
可以匹配所有的兄弟元素(不需要紧跟)
#wrap #first ~ div{
border: 1px solid;
}
css属性选择器
存在和值属性选择器
[attr] :该选择器选择包含attr属性的所有元素
[attr=val] : 该选择器仅选择attr属性被赋值为val的所有元素
[attr~=val] : 表示带有attr命名的属性元素,并且该属性是以一个空格分隔的值列表
子串值属性选择器
[attr!=val]: 选择attr属性的值以val开头(包括val)或以val开头的元素
[attr^=val]: 选择attr属性的值以val开头(包括val)的元素
[attr$=val]: 选择attr属性的值以val结尾(包括val)的元素
[attr*=val]: 选择attr属性的值中包括val的元素
补充 :伪类选择器
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a:active。
例如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写。