css中最基本几个选择器

浏览数：35 / 时间：2015年06月09日

css中有四种不同的选择器

①类选择器，又叫class选择器
.类选择器
{
属性名：属性值；
...
}
/*类选择器*/
.s1
{

font-weight:bold;
font-size:16px;
}
②id选择器
#id选择器名
{
属性名:属性值;
}
/*id选择器*/
#id1
{

font-size:40px;
}
③html元素选择器
html元素名称
{
属性名:属性值;
}
④通配符选择器

检索或设置对象四边的外补丁。默认值为 0 0。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
*{
margin-top:0px;上边距为0
margin-left:0px;左边距为0
margin:10px 30px 20px 40px
//有经验的程序员,如下
margin:0px;
padding:0px;
}
通配符选择器
该选择器可以用到所有的html元素，但是其优先权最低
*{
属性名：属性值;
... ...
}

简单的说，选择器就是在css中创建，而在网页页面（html,jsp,php,asp.net）中使用。
四个选择器的优先级
id选择器>class选择器>html选择器>通配符选择器

父子选择器是四个选择器的组合使用
/*父子选择器*/
对id1下的span进行修饰(中间必须加空格)
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
#id1 span span a{
color:blue;
}
通过上面的总结
①父子选择器可以有多级（但是在实际的开发中不超过三层）
②父子选择器有严格的层级关系
③父子选择器不局限于什么类型的选择器
可以是id选择器类选择器 ....
#id1 span span a
.s1 #id span
div #id .s2
1、id选择器和类选择器都可以有父子选择器
2、一个元素可以同时有id选择器和类选择器
3、id选择器的优先级高于类选择器
4、一个元素最多有一个id选择器，但是可以有多个类选择器
当一个元素被多个类选择器修饰的时候，各个类选择器之间用空格隔开
使用方法如下
<元素 class="类选择器1 类选择器2"/>html部分
当两个类选择器发生冲突的时候，则以写在css文件中的那个类选择器为准
5、在css文件中如果有多个类/id选择器，他们都有相同的部分，我们可以把相同的css样式放在一起
/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css文件的冗余*/
把各个选择器中相同的部分抽取出来，单独写一份，各个选择器之间用逗号隔开
6、CSS文件本身会被浏览器从服务器下载到本地，才能显示效果