今天将在这里介绍几种选择器,其中有标签选择器、类选择器、id选择器、并集选择器、通配符选择器。
选择器:一般都会去使用id选择器。
1.选择器的基本书写格式
选择器的一般格式:
Element(元素/标签)选择器
标签名称{
css属性:css属性值;
}
2.部分代码
1)标签选择器
div{
font-size:20px;
color:#00F;
}
2)class类选择器
- 在html标签中给定class属性
- 特点:在同一个html页面中,对个标签可以指定同名的class属性值
- 格式:
.class属性值{
css属性:css属性值;
}
.c_d1{
font-size:30px;
color:#0F0;
}
3)Id选择器
其中值得注意的是浏览器存在兼容问题:
前端:在标签中大部分能指定id属性值 唯一的
后端:http协议
request header:(请求头)
content-type:text/aplain
- 在标签中给定一个id属性值
- 特点:在同一个html页面中,标签的id属性值必须唯一,不能重复
后面javascript:通过id属性值获取标签对象,如果同名,document.getElementByld(“id属性值”)可能获取不到标签对象 - 格式:
#id属性值{
css样式属性:css属性值;
}
#dl2{
font-size:36px;
color:#F00;
}
4)并集选择器
格式:
selector1,selector2,…,selectorn{
css样式属性:css样式属性值;
}
_d1,#dl2{
font-size:30px;
background-color:greenyellow;
}
5)交集选择器(子元素选择器)
selector1 selector2…
div span{
font-size:26px;
color:grey;
}
6)通配符选择器:*
.*{
font-size:20px;
color:#CCC;
}
3.注意事项
- 类选择器的优先级大于标签选择器
- id选择器的优先级>class选择器>标签选择器