css中几种常用的选择器
1.通配符
*{
margin:0;
padding:0;
}
因为浏览器默认有margin和padding 而通配符主要作用就是去掉margin和padding 一般写在css最前
2.id选择器
#first{
color:red;
}
<div id="first">我是id选择器</div>
id选择器 调用css样式时需要用#
不推荐使用id选择器
以为id是唯一性的且不能共享 容易与js冲突
3.类选择器
.second{
color:green;
}
<div class="second">我是类选择器</div>
类选择器是使用次数最多的选择器
他可以共享使用切不会冲突
4.后代选择器
.second div{
color:orange;
}
<div class="second">我是类选择器
<div>我是后代选择器</div>
</div>
只要是(“second”)的后代都会跟随父元素的改变而改变
5.并集选择器
.one,.two{
color:orange;
}
<div class="one">我是并集选择器</div>
<divc class="two">我想一起变色</div>
注意点:两个类名之间需要添加英文模式下的,
6.交集选择器
div.c2{
color:red;
}
<div>
<div>我是儿子1</div>
<div class="c2">我是儿子2</div>
<div class="c3">我是儿子3</div>
</div>
举例说明:
既是div又是 c2才会变
7.子选择器
<style>
div>.c2{
width:100px;
height:100px;
boder:2px solid black;
}
</style>
<div>我是父元素
<div class="c2">我是儿子2</div>
<div class="c2">我是儿子3
<div class="c2">我是孙子3
</div>
</div>
只有亲儿子变 其余不变