本文为大家分享了CSS中常用的四种选择器，供大家参考，具体内容如下

1、类选择器（class选择器）

基本使用：

.类选择器{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板

.s1{

background-color:pink;

font-weight:bold;

font-size:16px;

color:black;

}

2、id选择器

基本使用：

#id选择器{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板

#id1{

background-color:silver;

font-size:40px;

}

3、html元素选择器

某个html元素{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板

a:link{

color:black;

text-decoration:none;

font-size:24px;

}

a:visited{

color:red;

}

a:hover{

color:green;

text-decoration:underline;

font-size:40px;

}

p.cls1{

color:blue;

font-size:30px;

}

p.cls2{

color:red;

font-size:20px;

}

a 元素的效果为：

（1）默认样式是黑色，24px，没有下划线；

（2）当鼠标移动到超链接时，自动出现下划线；

（3）点击后，超链接变成红色。

p 元素的选择器在html中的使用，如：

XML/HTML Code复制内容到剪贴板

<pclass="cls1">hello,world!hello,world!hello,world!</p>

<pclass="cls2">hello,html!hello,html!hello,html!</p>

4、通配符选择器

该选择器可以用到所有的html元素，但是其优先权最低

*{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板

*{

margin:0px;

padding:0px;

}

四个选择器的优先权如下：

Id选择器 > class选择器 > html选择器 > 通配符选择器

选择器的细节问题！！！

1、父子选择器的使用

CSS Code复制内容到剪贴板

#id1span{

color:red;

font-style:italic;

}

#id1spanspan{

color:green;

}

#id1spanspana{

color:blue;

}

通过上面总结：

（1）父子选择器可以有多级（但是在实际开发中，建议不要超过三层）；

（2）父子选择器有严格的层级关系；

（3）父子选择器不局限于什么类型选择器，比如

CSS Code复制内容到剪贴板

#idspanspan

s1#idspan

div#ids2

2、一个元素可以同时有id选择器和类选择器（但是id选择器不可以有多个）

案例：

<span class="s1" id="tid">TestId</span>

3、一个元素最多有一个id选择器，但是可以有多个类选择器

使用方法如下：

<元素 class=”类选择器1 类选择器2”>内容</元素>

案例：

CSS Code复制内容到剪贴板

.s1{

background-color:pink;

font-weight:bold;

font-size:16px;

color:black;

}

.cls1{

font-style:italic;

text-decoration:underline;

}

（注：这里需要注意的是，当同时使用多个类选择器且类选择器中的样式发生冲突时，以CSS文件中最尾的类选择器的样式为准，不依赖于html文件中的类选择器的放置顺序。）

4、我们可以把某个CSS文件中的选择器共有的部分，独立出来写成一份。比如：

CSS Code复制内容到剪贴板

.ad_stu{

width:136px;

height:196px;

background-color:#FC7E8C;

margin:5px006px;

float:left;

}

.ad_2{

background:#7CF574;

height:196px;

width:457px;

float:left;

margin:5px006px;

}

.ad_house{

background:#7CF574;

height:196px;

width:152px;

float:left;

margin:5px006px;

}

//上面的CSS可以写成

CSS Code复制内容到剪贴板

.ad_stu{

width:136px;

background-color:#FC7E8C;

}

.ad_2{

background:#7CF574;

height:196px;

width:457px;

}

.ad_house{

background:#7CF574;

height:196px;

width:152px;

}

.ad_stu,.ad_2,.ad_house{

height:196px;

margin:5px006px;

float:left;

}

5、CSS文件本身也会被浏览器从服务器下载到本地，才能显示效果。

以上就是四种CSS常用的选择器使用方法和注意事项，希望对大家的学习有所帮助。