css选择器总结
要使用css对html页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到css选择器。html页面中的元素就是通过css选择器控制的。
1.类选择器
类选择器根据类名来选择前面以“.”,例:
.divOne{
color:red;
}
2.元素选择器
元素选择器又称标签选择器,例:
p{
background:#fff;
}
3.ID选择器
ID选择器可以让标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素,具有唯一性,这意味着同一ID在页面中只能出现一次。前面以“#”,例:
#divTow{
font-size:14px;
}
4.后代选择器
后代选择器也称包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面子元素的选择放在后面,中间用一个空格分开。例:
#a #b #c{
color:#666;
}
5.子选择器
子选器与后代选择器是有区别的,子选择器仅指它的直接后代,或理解成子元素的第一个后代。而后代选择器是作用于所有子后代元素,它通过空格来选择,而子选择器是通过“>”进行选择。
6.伪类选择器
鼠标悬停等就要用到伪类。伪类不仅可以用到链接标签上,也可用在一些表单元素里。例:
a:hover{
color:#666;
}
7.通用选择器
通用选择器用“*”来表示。例:
*{
font-size:14px;
}
指所有元素字体大小都是14px,也可以和后代选择器组合使用。例:
p*{
font-size:14px;
}
8.群组选择器
当几个元素样式一样,可以调用一个声明,元素之间用逗号隔开。例:
a,b,c{
font-size:14px;
}
9.相邻同胞选择器
除了找到上面的子元素选择器和后代选择器,我们还希望找到兄弟之间的一个。例:
h1+p{
font-size:14px;
}
10.伪元素选择器
所有伪元素选择器都必须放在出现该伪元素的选择器最后面,也就是说伪元素选择器不能跟任何派生选择器。
… … … … … … … … …
… … … … …
…
注释:部分引用资料