选择器
一、元素选择器
1.标签选择器
选择器的功能:选中要添加样式的标签元素。
标签选择器
- 通过标签名直接选择相应的标签。
- 不管有多复杂的嵌套关系,标签的位置就算藏得很深,依然可以被标签选择器命中。
(1)格式
标签名{
声明;
}
eg:
div{
color: red;
}
p{
background-color: sandybrown;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
(2)作用
- 利用标签选中所有的特性,进行默认样式的清除。
- 复杂选择器中一部分使用。
2.ID选择器
(1)格式
#ID值{
声明;
}
eg:
#fristP{
font-size: 24px;
color: #a06649;
}
(2)作用
选中页面中唯一的一个标签。
注意:
- id值必须是唯一的,在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
- 所有的标签都有ID属性。ID命名的规范:由字母,下划线,中划线,数字组成。不能以数字开头。
- 见名知意。不要起毫无意思的名字。
- 驼峰写法:SearchButton(大驼峰) searchButton(小驼峰,推荐) 多个单词,从第二个单词开始,每个单词的首字母大写。
- 下划线写法:search_button 多个单词,从第二个单词开始,每个单词的前面添加一条下划线。
- id选择器尽量不要在css中使用,而是配合js使用。
3.类选择器
类选择器:通过标签中的class属性来选择标签
(1)格式
.class值{
声明;
}
eg:
.redFont{
color: red;
}
.div1{
background-color: seagreen;
}
(2)优点
可以选择一部分标签,设置相同的样式。
注意:
- class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
- 一个标签可以拥有多个class值。
- 命名规则与ID相同。
- 类写样式,ID写行为。
4.通配符(*)
*:表示选中所有标签。(包含body标签。慎用)
eg;
*{
color: seagreen;
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
**使用场景:**清除默认的样式。
现在已经不常用了,因为效率不高(一刀切,所有的标签都会去执行一次css代码)。
二、关系选择器
1.后代选择器
通过标签的嵌套关系,来缩小选择范围,在范围内查找相关的元素。
格式
选择器1 选择器2{
声明;
}
eg:
p span{
background-color: rebeccapurple;
}
注意:
- 选择器1必须是选择器2的祖先元素。
- IE7开始兼容,IE6不兼容。
- 定义时,选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
- 当要把某些元素中的某些元素进行样式修改时,就要使用后代选择器。
2.子代选择器
子代选择器:通过标签间的嵌套关系,来选中相应标签的子元素。
格式
选择器1>选择器2{
声明;
}
eg:
div>p{
background-color: rosybrown;
}
注意: > 左右两边的关系必须是父子关系。
3.相邻选择器
格式
选择器1+选择器2{
声明;
}
eg:
h3+p {
color: slateblue;
}
选择紧贴在选择器1元素之后的选择器2元素,两者必须同属于一个父级。
(IE7兼容,IE6不兼容。)
4.兄弟选择器
兄弟选择器:同属于一个父级。
格式
选择器1 ~ 选择器2{
声明;
}
eg:
h3 ~ p{
color: slateblue;
}
选中的是选择器1元素之后的所有同级的选择器2元素。
5.交集选择器
交集选择器:既满足条件1,又满足条件2
格式
选择器1选择器2{
声明;
}
eg:
span.nav.span1{
background-color: royalblue;
}
注意:
- 交集选择器如果是标签选择器与类选择器的混写,则必须将标签选择器放在前面。
- 连续交集;既满足条件1,又满足条件2,还满足条件3.
6.并集选择器
格式
选择器1,选择器2{
声明;
}
eg:
h1,h2,span{
color: royalblue;
}
三、伪类选择器
(1)定义
同一个标签,根据不同的状态,拥有不同的样式,这就叫做“伪类”。伪类使用:(冒号)来表示。
(2)格式
选择器:伪类名{
声明;
}
1.序选择器
first-child:
判断当前元素是否为父元素的第一个子元素,如果是,则选中。
last-child:
判断当前元素是否为父元素的最后一个子元素,如果是,则选中。
only-child;
判断当前元素是否为父元素的唯一一个子元素,如果是,则选中。
格式
选择器:first-child{
声明;
}
eg:
li:first-child {
color: royalblue;
}
2.nth-child(n)选择器
格式
n表示父元素下的第几个子元素。
E:nth-child(n){
声明;
}
eg:
/*n 表示一个乘法因子,可以是0,1,2....自然数 */
li:nth-child(2n+1) {
color: slateblue;
}
li:nth-child(2n) {
color: green;
}
3.nth-of-type选择器
格式
E:nth-of-type(n){
声明;
}
eg:
/* 选中父元素下的第二个p标签 */
p:nth-of-type(2) {
background-color: indianred;
}
/* 选中父元素下的第三个span标签 */
span:nth-of-type(3) {
background-color: green;
font-size: 30px;
}
选中父元素下的同类型中的第n个元素
- 要使该属性生效,E必须是某个元素的子元素,E的父元素最高可以是html。
- 该选择器命中的是父元素中的第n个为E的子元素,不管第n个子元素是否为E.
4.link
静态伪类 只能用于超链接的样式。
:link 超链接点击之前
a:link{
color: green;
}
5.visited
静态伪类 只能用于超链接的样式。
:visited 超链接被访问过之后。
a:visited{
color: pink;
}
6.hover
动态伪类 针对所有的标签都适用
:hover “悬停” 鼠标放在标签上时。
a:hover{
text-decoration: none;
}
7.active
动态伪类 针对所有的标签都适用
:active “激活” 鼠标点击标签,不松手时。
a:active{
color: red;
}
8.focus
特殊 针对表单元素。
:focus 是某个标签获得焦点时的样式。
input:focus{
background-color: sienna;
}
对于a标签有4种伪类
对应四种状态:
-
:link 点击之前
-
:visited 访问之后
-
:hover 鼠标悬停
-
:active 激活 鼠标点击时。
使用时的顺序:link visited hover active(lvha—爱恨准则)